elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Marcadores en google maps
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Marcadores en google maps  (Leído 1,811 veces)
andreslrz

Desconectado Desconectado

Mensajes: 6


Ver Perfil
Marcadores en google maps
« en: 16 Mayo 2015, 14:58 pm »

Hola.

Necesito poner en un mapa de google maps una serie de marcadores sin utilizar coordenadas, sino el numero de domicilio ( o dirección como le digan en su país). Es la primer ves tulizando este api por lo que no entiendo mucho, ya comprendi lo basico, de trazar rutas, poner marcadores, modificarlos, pero no he podido poner varios marcadores con la direccion o domicilio.

Tengo este ejemplo que encontré, ya probé y funciona: http://jafrancov.com/2011/06/geocode-gmaps-api-v3/

De antemano agradezco cualquier ayuda.


En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Marcadores en google maps
« Respuesta #1 en: 17 Mayo 2015, 00:54 am »

Presta atencion a los comentarios del codigo..

Código
  1. ...
  2. // Si hay resultados encontrados, centramos y repintamos el mapa
  3. // esto para eliminar cualquier pin antes puesto
  4. var mapOptions = {
  5. center: results[0].geometry.location,
  6. mapTypeId: google.maps.MapTypeId.ROADMAP
  7. };
  8. map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
  9. ...

Solo tenes que comentarlo.. quedara algo asi..

Código
  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8" />
  6. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  7. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  8. <script type="text/javascript">
  9. $(document).ready(function() {
  10. load_map();
  11.  
  12. $('#search').on('click', function(){
  13. // Obtenemos la dirección y la asignamos a una variable
  14. var address = $('#address').val();
  15. // Creamos el Objeto Geocoder
  16. var geocoder = new google.maps.Geocoder();
  17. // Hacemos la petición indicando la dirección e invocamos la función
  18. // geocodeResult enviando todo el resultado obtenido
  19. geocoder.geocode({
  20. 'address': address
  21. }, geocodeResult);
  22. });
  23.  
  24. });
  25.  
  26. var map;
  27.  
  28. function load_map() {
  29. var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
  30. var myOptions = {
  31. zoom: 4,
  32. center: myLatlng,
  33. mapTypeId: google.maps.MapTypeId.ROADMAP
  34. };
  35. map = new google.maps.Map($("#map_canvas").get(0), myOptions);
  36. }
  37.  
  38. function geocodeResult(results, status) {
  39. // Verificamos el estatus
  40. if (status == 'OK') {
  41. // Si hay resultados encontrados, centramos y repintamos el mapa
  42. // esto para eliminar cualquier pin antes puesto
  43. /*var mapOptions = {
  44. center: results[0].geometry.location,
  45. mapTypeId: google.maps.MapTypeId.ROADMAP
  46. };
  47. */
  48. //map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
  49. // fitBounds acercará el mapa con el zoom adecuado de acuerdo a lo buscado
  50. map.fitBounds(results[0].geometry.viewport);
  51. // Dibujamos un marcador con la ubicación del primer resultado obtenido
  52. var markerOptions = {
  53. position: results[0].geometry.location
  54. }
  55. var marker = new google.maps.Marker(markerOptions);
  56. marker.setMap(map);
  57. } else {
  58. // En caso de no haber resultados o que haya ocurrido un error
  59. // lanzamos un mensaje con el error
  60. alert("Geocoding no tuvo éxito debido a: " + status);
  61. }
  62. }
  63. </script>
  64. </head>
  65.  
  66. <body>
  67. <h1>Testing Google Maps</h1>
  68. <div>
  69. <input type="text" maxlength="100" id="address" placeholder="Dirección" />
  70. <input type="button" id="search" value="Buscar" />
  71. </div>
  72. <br/>
  73. <div id='map_canvas' style="width:600px; height:400px;"></div>
  74. </body>
  75.  
  76. </html>


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines