I am trying to create a page that I am going to integrate with excel with vba. . I want to add event Listener to marker when it is clicked. I can barely manage to create a "click listener" to single marker ,but I couldn't do it to multiple markers that are created dynamically using a loop.
When the marker is clicked, I want the street view to update to the new clicked marker's position.
I really appreciate any suggestion.
Thank you.
This is what I have(from here and there).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; //me
var labelIndex = 0; //me
var map;
var panorama;
//this will be created from server side
var markers = [
{ lat: 39.976784, lng: -75.234347, name: "marker 1" },
{ lat: 39.977043, lng: -75.235087, name: "marker 2" },
{ lat: 39.976097, lng: -75.234508, name: "marker 3" },
{ lat: 39.977059, lng: -75.233682, name: "marker 4" }
];
var myLatlng = new google.maps.LatLng(markers[0].lat,markers[0].lng);
function initialize() {
//var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
var mapOptions = {
zoom: 16,
center: myLatlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
navigationControl: true,
position: myLatlng,
//pov: {
//heading: 34,
//pitch: 10
//}
};
// Set the initial Street View camera to the center of the map
new google.maps.StreetViewPanorama(document.getElementById('pano'),
panoramaOptions);
//this is the loop that will creat the marker
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
label: labels[labelIndex++ % labels.length],
title: data.name
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-excel" style="width: 60%; height: 100%;float:left"></div>
<div id="pano" style="width: 40%; height: 50%;float:right"></div>
<div id="map-canvas" style="width: 40%; height: 50%;float:right"></div>
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
