Google maps - desplegar marcadores

Desplegar marcadores al cargar un mapa de Google Maps

by Hugo Lizama

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<h1>Como desplegar marcadores al cargar mapa de Google Maps</h1>
<div id="map"></div>

CSS

#map{
    max-width: 800px; 
    height: 500px;
}

JavaScript

//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...