google mas y street

robertocarrillo · #1 (**permalink**) 16/03/2016, 09:04

Hola, tengo un array que viene de una consulta php y me muestra los markers según la consulta a mi base de datos.
Lo que quisiera saber es como hacer para que al hacer clic sobre uno de los markers me muestre en otro div llamado map_street la imagen de street view según esa coordenada.
Es posible eso, porque solamente me muestra la coordenada de un solo registro? Es como si me faltara una funcion que discrimine cada marker del array, pero no llego a entenderlo.
AYUDA !!!!!!!

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 0; padding: 0 }
#map_canvas{
	width: 700px;
	height: 600px;
}
#map_street{
	width: 700px;
	height: 600px;
}
</style>
<script type="text/javascript">
	function loadStreetView(map, marker) {
		if (marker == undefined || marker == null) return;		
				var service = new google.maps.StreetViewService();
		service.getPanoramaByLocation(marker.getPosition(), 200, function(result, status) {
	        if (status == google.maps.StreetViewStatus.OK) {
	          	var panorama = map.getStreetView();
	    		panorama.setPosition(result.location.latLng);
				panorama.setVisible(true);
	        }
	        else {
	        	alert("No existe imagen a " + 200 + " metros");
	        	return;
	        }
	    });
	}
    function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(<?php echo $lat[5].",".$lng[5]?>),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
            
        var map_street = new google.maps.Map(document.getElementById("map_street"),
        mapOptions);

var marcadores = [<?php	for ($i=0; $i<$CantidadDeLineas; $i++){echo "['ACCIDENTE: Actores: ".$actor1[$i]." - ".$actor2[$i]." // Fecha: ".$fecha[$i]." // Hora: ".$hora[$i]." // Observaciones: ".$observa[$i]."', ".$lat[$i].",".$lng[$i]."],";}?>];

for (var i = 0; i < marcadores.length; i++) {
var marcador = marcadores[i];

        var myLatlng = new google.maps.LatLng(marcador[1],marcador[2]);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
			title: ''
        });
        
        google.maps.event.addListener(marker, 'click', function() {
document.getElementById('map_street').style.display ='block';        
        	loadStreetView(map_street, marker);
        });}}
</script>

</head>
<body onload="initialize()">
<div style="float:left" id="map_canvas"></div>
<div style="display:none;float:right" id="map_street"></div>
</body>
</html>