Google Map API V3 - Haga clic en Marker para ver más contenido de información como superposición (como en Google Maps)

Utilizamos Google Map Api V3 para cargar el mapa de google en el contenedor HTML. Tenemos un formulario de búsqueda de ubicación. En el envío, obtendremos las ubicaciones disponibles y estableceremos los marcadores en el mapa. Una vez que se cargan los marcadores, al hacer clic en cada marcador, necesitamos 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 recuadro de superposición más información con detalles adicionales como Estrellas, Direcciones, Buscar cerca, Guardar en mapa, Más ...)Google Map API V3 - Haga clic en Marker para ver más contenido de información como superposición (como en Google Maps)

¿Hemos incorporado una función api para cargue la caja de superposición como se indica arriba. O no tenemos la función de cargar los detalles como lo que tenemos actualmente en el mapa de google.

Cuando busqué en google y mapa documentos, puedo ver opciones para mostrar la ventana de superposición y escribir contenido dentro del cuadro. Pero no vi opciones para cargar el contenido según sea necesario.

He pegado el código siguiente 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 cualquier indicio sobre cómo lograr estos resultados, será útil. Además, por favor guía, si es posible a través de Google API V3.

Gracias de antemano,

Regards

Srinivasan.C

Fuente

2012-06-12 Srinivasan

checkout la biblioteca InfoBubble .. – gorelative

mirada en la ventana de información estándar https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows – Ray

No entiendo por qué estás abriendo una nueva ventana de Google Maps desde un marcador API de Google Maps? No se puede agregar la ventana de información en Google Maps a través de la 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>

Fuente

2012-06-13 18:37:27 transilvlad

@Srinivasan hizo esto ayuda? – transilvlad

Creo que OP está hablando de la barra lateral izquierda que se desliza al hacer clic en un pin del mapa en Google Maps. (es decir, maps.google.com no utiliza la ventana de información) –

compañero muy impresionante! :) –

Google Map API V3 - Haga clic en Marker para ver más contenido de información como superposición (como en Google Maps)

Respuesta

Cuestiones relacionadas