Cómo establecer Google mapa de marcadores de latitud y longitud y proporcionan burbuja de información

Question

El código de ejemplo proporcionado por Google Maps API

  var geocoder; 
      var map; 
      function initialize() { 
      geocoder = new google.maps.Geocoder(); 
      var latlng = new google.maps.LatLng(40.77627, -73.910965); 
      var myOptions = { 
       zoom: 8, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      } 

la siguiente sólo muestra Google mapa de la ubicación sin un marcador. Me preguntaba cómo puedo colocar un marcador dando parámetros de latitud/longitud. ¿Y cómo es posible almacenar mi propia información extraída de una base de datos en ese marcador?

Answer 1

Aquí es una JSFiddle Demo que le muestra cómo configurar un mapa marcador de Google por Lat GNL y también cuando clic le daría una ventana de información (burbuja):

Aquí está nuestra HTML básico con 3 hipervínculos cuando se hace clic añade un marcador en el mapa:

<div id="map_canvas"></div> 

<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/> 
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/> 
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/> 

Primero establecemos 2 variables globales. una para el mapa y la otra un vector que mantiene nuestros marcadores:

var map; 
var markers = []; 

Ésta es nuestra inicialización para crear un mapa de Google:

function initialize() { 
    var latlng = new google.maps.LatLng(40.77627, -73.910965); 
    var myOptions = { 
     zoom: 1, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

Luego creamos 3 lat lugares de GNL, donde nos gustaría poner nuestra marcadores:

var usa = new google.maps.LatLng(37.09024, -95.712891); 
var brasil = new google.maps.LatLng(-14.235004, -51.92528); 
var argentina = new google.maps.LatLng(-38.416097, -63.616672); 

Aquí creamos una función para agregar nuestros marcadores según lo que se le pase. myloc será usa, brasil o argentina y luego creamos el marcador basado en el parámetro pasado. Con la función addMarker verificamos y nos aseguramos de no crear un marcador duplicado en el mapa llamando al ciclo for y si el parámetro pasado ya se ha creado, salimos de la función y no hacemos nada, sino creamos el marcador e insertarlo en la matriz de marcadores globales. Después de que se crea el marcador, adjuntamos una ventana de información con su marcador asociado haciendo markers[markers.length-1]['infowin'] marcadores. Longitud-1 es básicamente obtener el marcador recién insertado en la matriz. Dentro de la ventana de información, configuramos el contenido usando html. Esta es básicamente la información que ingresas en la ventana de burbujas o información (puede ser información meteorológica que puedes rellenar usando una API meteorológica, etc.). Después de adjuntar la ventana de información, adjuntamos un oyente de evento onclick usando addListener de la API de Google Map y cuando se hace clic en el marcador queremos abrir la ventana de información que está asociada llamando al this['infowin'].open(map, this) donde el mapa es nuestro mapa global y este es el marcador en el que estamos asociando el evento onclick.

function addMarker(myloc) { 
    var current; 
    if (myloc == 'usa') current = usa; 
    else if (myloc == 'brasil') current = brasil; 
    else if (myloc == 'argentina') current = argentina; 
    for (var i = 0; i < markers.length; i++) 
    if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return; 

    markers.push(new google.maps.Marker({ 
     map: map, 
     position: current, 
     title: myloc 
    })); 

    markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({ 
     content: '<div>This is a marker in ' + myloc + '</div>' 
    }); 

    google.maps.event.addListener(markers[markers.length - 1], 'click', function() { 
     this['infowin'].open(map, this); 
    }); 
} 

Cuando todo está hecho básicamente atribuimos window.onload evento y llamamos a la función initialize:

window.onload = initialize;