Google地图：点击按钮即可打开特定的信息窗口

Question

I have used google map custom marker with info windows. I need to add function to open Info window when user click on specific button . There are multiple markers with separate contents. Here i found a solution to open a single Info window with a single button click: https://stackoverflow.com/a/18334899/6191987

I have tried with the above solution, but i don't know how to target to open each specific Info windows on button click.

Here is the code what i have tried:

  html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } .btns { display: inline-block; width: 100%; margin-bottom: 20px } .btns a { display: block; padding: 10px; float: left; background: #eee; margin-right: 5px; text-decoration: none; } 

 <div class="btns"> <a href="#" onclick="myClick(0);">Open Info Window 1</a> <a href="#" onclick="myClick(0);">Open Info Window 2</a> <a href="#" onclick="myClick(0);">Open Info Window 3</a> </div> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 17, center: new google.maps.LatLng(40.712696, -74.005019), mapTypeId: 'roadmap', styles: [{ elementType: 'geometry', stylers: [{ color: '#242f3e' }] }, { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] }, { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] }, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{ color: '#263c3f' }] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{ color: '#6b9a76' }] }, { featureType: 'road', elementType: 'geometry', stylers: [{ color: '#38414e' }] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#212a37' }] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#9ca5b3' }] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{ color: '#746855' }] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{ color: '#1f2835' }] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{ color: '#f3d19c' }] }, { featureType: 'transit', elementType: 'geometry', stylers: [{ color: '#2f3948' }] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] }, { featureType: 'water', elementType: 'geometry', stylers: [{ color: '#17263c' }] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{ color: '#515c6d' }] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{ color: '#17263c' }] }] }); var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var icons = { parking: { icon: iconBase + 'parking_lot_maps.png' }, library: { icon: iconBase + 'library_maps.png' }, info: { icon: iconBase + 'info-i_maps.png' } }; var features = [{ position: new google.maps.LatLng(40.712696, -74.005019), content: 'test content one', type: 'parking' }, { position: new google.maps.LatLng(40.712753, -74.006081), content: 'test content two', type: 'parking' }, { position: new google.maps.LatLng(40.713664, -74.007819), content: 'test content three <a href="http://www.google.com">A link to google</a>', type: 'library' }]; var infowindow = new google.maps.InfoWindow({ content: "" }); // Create markers. features.forEach(function(feature) { var marker = new google.maps.Marker({ position: feature.position, content: feature.content, icon: icons[feature.type].icon, map: map }); var content = "<a href='" + feature.content + "'>A link to google</a>"; marker.addListener('click', function() { infowindow.setContent('<div><strong>' + marker.content + '</strong></div>'); infowindow.open(map, marker); }); }); } //on click function function myClick(id) { google.maps.event.trigger(markers[id], 'click'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap"> </script> 

JSFiddle: https://jsfiddle.net/vishnuprasadps/3wk7q3fd/

Answer 1

That is because markers is not a defined variable in your code. At the top of your code, you can simply declare markers as an empty array, ie:

var markers = [];

Further down close to the bottom of your code, when you are iterating through your features collection, you have to push the marker object into this array, ie: markers.push(marker); . In the context of your code, it will look something like this:

// Create markers.
features.forEach(function(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    content: feature.content,
    icon: icons[feature.type].icon,
    map: map
  });
  var content = "<a href='" + feature.content + "'>A link to google</a>";
  marker.addListener('click', function() {
    infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');

    infowindow.open(map, marker);
  });

  // Push your marker object into your array
  markers.push(marker);
});

---

And that should work: see proof-of-concept below. Note: I have taken the liberty to change the inline JS callback arguments, so that you will not trigger the same marker info window for all 3 links.

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } .btns { display: inline-block; width: 100%; margin-bottom: 20px } .btns a { display: block; padding: 10px; float: left; background: #eee; margin-right: 5px; text-decoration: none; } 

 <div class="btns"> <a href="#" onclick="myClick(0);">Open Info Window 1</a> <a href="#" onclick="myClick(1);">Open Info Window 2</a> <a href="#" onclick="myClick(2);">Open Info Window 3</a> </div> <div id="map"></div> <script> var map; var markers = []; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 17, center: new google.maps.LatLng(40.712696, -74.005019), mapTypeId: 'roadmap', styles: [{ elementType: 'geometry', stylers: [{ color: '#242f3e' }] }, { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] }, { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] }, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{ color: '#263c3f' }] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{ color: '#6b9a76' }] }, { featureType: 'road', elementType: 'geometry', stylers: [{ color: '#38414e' }] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#212a37' }] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#9ca5b3' }] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{ color: '#746855' }] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{ color: '#1f2835' }] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{ color: '#f3d19c' }] }, { featureType: 'transit', elementType: 'geometry', stylers: [{ color: '#2f3948' }] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] }, { featureType: 'water', elementType: 'geometry', stylers: [{ color: '#17263c' }] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{ color: '#515c6d' }] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{ color: '#17263c' }] }] }); var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var icons = { parking: { icon: iconBase + 'parking_lot_maps.png' }, library: { icon: iconBase + 'library_maps.png' }, info: { icon: iconBase + 'info-i_maps.png' } }; var features = [{ position: new google.maps.LatLng(40.712696, -74.005019), content: 'test content one', type: 'parking' }, { position: new google.maps.LatLng(40.712753, -74.006081), content: 'test content two', type: 'parking' }, { position: new google.maps.LatLng(40.713664, -74.007819), content: 'test content three <a href="http://www.google.com">A link to google</a>', type: 'library' }]; var infowindow = new google.maps.InfoWindow({ content: "" }); // Create markers. features.forEach(function(feature) { var marker = new google.maps.Marker({ position: feature.position, content: feature.content, icon: icons[feature.type].icon, map: map }); var content = "<a href='" + feature.content + "'>A link to google</a>"; marker.addListener('click', function() { infowindow.setContent('<div><strong>' + marker.content + '</strong></div>'); infowindow.open(map, marker); }); markers.push(marker); }); } //on click function function myClick(id) { google.maps.event.trigger(markers[id], 'click'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap"> </script> 

---

Additional notes:

• Do not use inline JS . You can simply iterate through your links and bind event listeners to them using .addEventListener('click', function() {...}) .
• If you have an arbitrary number of features, it helps that you get the length of this collection and generate the links dynamically