Google maps - desplegar marcadores

Desplegar marcadores al cargar un mapa de Google Maps

by masmiguel

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(39.5841338,2.6482952);

//variable para globos de informacion
var infowindow = null;

//puntos a ser marcados en el mapa
var puntos = [        
['nombre',39.5842825,2.6485585,'info']




];

//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(39.5841338,2.6482952), //coordenada inicial
    zoom: 22, //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