Google Map API V3: haga clic en Marcador para mostrar más contenido de información como superposición (como en Google Maps)

Usamos Google Map Api V3 para cargar el mapa de Google en un contenedor HTML. Tenemos un formulario de búsqueda de ubicación. Al enviar, obtendremos las ubicaciones disponibles y estableceremos marcadores en el mapa. Una vez que se cargan los marcadores, al hacer clic en cada marcador, debemos mostrar el título, los detalles de la dirección y el diseño como lo que tenemos en el mapa de Google. (En Google Maps: al hacer clic en el marcador rojo, podemos ver el cuadro de superposición de más información con detalles adicionales como estrellas, direcciones, buscar cerca, guardar en el mapa, más...)

¿Hemos incorporado la función api para cargar el cuadro de superposición como arriba? O no tenemos la función para cargar los detalles como lo que tenemos en el mapa de Google actualmente.

Cuando busqué en Google y Map Docs, puedo ver opciones para mostrar la ventana superpuesta y escribir contenido dentro del cuadro. Pero no vi opciones para cargar el contenido según sea necesario.

He pegado el código a continuación como referencia.

       var map = null;
       gmap_ready = function (){
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

   function fnLoadMarkers(){
var locations  = [
    ['S Dakota', 43.834527,-103.564457, 1],
    ['Texas', 31.428663,-99.418947, 2],
    ['California', 36.668419,-120.249025, 3],
    ['Newyork', 43.197167,-76.743166, 4],
    ['Missouri', 38.410558,-92.73926, 5]
];
setMarkers(map,locations);
   }
 function setMarkers(map, locations) {
var image = 'images/marker.gif';

for (var i = 0; i < locations.length; i++) {
    var currLocation = locations[i];
    var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image,
        title: currLocation[0],
        zIndex: currLocation[3]
    });
    google.maps.event.addListener(marker, 'click', function() {
        var latitude = this.position.lat();
        var longitude = this.position.lng();
        window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A");
    });
  }

}

Si hay alguna pista sobre cómo lograr estos resultados, será útil. Además, indique si es posible a través de Google API V3.

Gracias de antemano,

saludos

Srinivasan.C

preguntado el 12 de junio de 12 a las 16:06

echa un vistazo a la biblioteca InfoBubble .. -

mirar en la ventana de información estándar desarrolladores.google.com/maps/documentation/javascript/… -

1 Respuestas

No entiendo por qué está abriendo una nueva ventana a Google Maps desde un marcador API de Google Maps. No puede agregar una ventana de información en Google Maps a través de una URL.

Así es como lo hago.

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

  // Map options  
  var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 

  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  // Info window element 
  infowindow = new google.maps.InfoWindow(); 

  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
  }); 

  // Listen for click event  
  google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html>

Respondido el 13 de junio de 12 a las 19:06

@Srinivasan ¿esto ayudó? - Transilvlad

Creo que el OP está hablando de la barra lateral izquierda que se desliza cuando haces clic en un marcador de mapa en Google Maps. (es decir, maps.google.com no utiliza la ventana de información) - Gato de james

muy genial compañero! :) - Daniel García Sánchez

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.