create event listener to dynamically created google-map marker

问题

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>

回答1:

keep a reference to the panorama:

// Set the initial Street View camera to the center of the map
new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

should be:

// Set the initial Street View camera to the center of the map
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

Change the location of the panorama in the marker click listener.

google.maps.event.addListener(marker,'click', function(e) {
   pano.setPosition(marker.getPosition());
});

proof of concept fiddle

code snippet:

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
  pano = new google.maps.StreetViewPanorama(document.getElementById('pano'),
    panoramaOptions);

  //this is the loop that will creat the marker
  for (var 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.addListener(marker, 'click', function(e) {
      pano.setPosition(marker.getPosition());
    });
  }

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<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>

回答2:

In your function here (function(data){....})(data); Because you use array of marker.

function addMarker(data) {
  (function(data){   <<-- New line added 
  // 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.addListener(marker, 'click', function(){// <<---- New line added
       // Code event listener .... 
  });// <<---- New line added

  })(data); // <<---- New line added
}

view more example here: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

回答3:

// Include this code to your loop

var infowindow = new google.maps.InfoWindow({
    content: 'info content'
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

来源：https://stackoverflow.com/questions/31889457/create-event-listener-to-dynamically-created-google-map-marker

标签

javascript

google-maps

google-maps-api-3

google-street-view