Como desplegar marcadores al cargar mapa de Google Maps

| 14 agosto, 2015 | JQuery/Javascript | No hay comentarios

En el siguiente ejemplo vamos a agregar el mapa de Google Maps a una página web y además vamos a ver como desplegar marcadores en dicho mapa con información personalizada que se podrá visualizar al hacer clic en el marcador.

En el ejemplo los puntos estan definidos fijamente pero fácilmente pueden crear una llamada a una base de datos de donde obtener las coordenadas y la información para el marcador y construir el array de datos que necesita Google Maps.

En este ejemplo estamos utilizando Google Maps API versión 3.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
  <head>
    <title>Como desplegar marcadores al cargar mapa de Google Maps</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      #map{
        width: 800px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <h1>Como desplegar marcadores al cargar mapa de Google Maps</h1>
    <div id="map"></div> ><!-- mapa -->
    
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>      
      //coordada inicial del mapa
      var coordenadas= new google.maps.LatLng(13.802994, -88.9053364);
      
      //variable para globos de informacion
      var infowindow = null;
 
      //puntos a ser marcados en el mapa
      var puntos = [        
        ['Santa Ana', 13.9837933, -89.5628214, 'info adicional 1'],
        ['San Salvador', 13.6914782, -89.2146939, 'info adicional 2'],
        ['San Miguel', 13.531445, -88.2719195, 'info adicional 3']
      ];
      
      //funcion para posicionar los marcadores en el mapa
      function setMarkers(map, puntos) {    
        //limpiamos el contenido del globo de informacion
        var infowindow = new google.maps.InfoWindow({
            content: ''
        });
 
        //recorremos cada uno de los puntos
        for (var i = 0; i < puntos.length; i++) {
          var place = puntos[i];
          
          //propiedades del marcador
          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(place[1], place[2]), //posicion
              map: map,
              animation: google.maps.Animation.DROP, //animacion          
              nombre: place[0], //personalizado - nombre del punto
              info: place[3] //personalizado - informacion adicional
          });
          
          //se agrega el evento click a cada marcador, asi despliega la
          //informacion nada uno de los marcadores
          google.maps.event.addListener(marker, 'click', function() {
            //html de como vamos a visualizar el contenido del globo
            var contenido='<div id="content" style="width: auto; height: 60px;">' + this.nombre + '<hr/>' + this.info + '</div>';
            infowindow.setContent(contenido); //asignar el contenido al globo
            infowindow.open(map, this); //mostrarlo
          });
        }
      }
      
      //funcion para inicializar el mapa
      function initialize() {
        //iniciamos un nuevo mapa el div 'map' y le asignamos propiedades
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(13.802994, -88.9053364), //coordenada inicial
          zoom: 8, //nivel de zoom
          mapTypeId: google.maps.MapTypeId.ROADMAP //tipo de mapa      
        });
        
        //llamar a la funcion que escribe los marcadores
        setMarkers(map, puntos);
 
      }
 
      initialize(); //inicializar el mapa
    </script>
  </body>
</html>

Resultado:

google_maps

Aunque espero escribir más sobre como personalizar los mapas también pueden revisar la documentación de Google Maps para referencias.

DEMO

Etiquetas:

Entradas relacionadas

Sobre el Autor

hug0

Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla

Deja un comentario