stackoom
  简体   繁体   中英

Get the Clicked marker in Google maps and send it to a function

 原文  2016-12-30 14:29:18  8   2    javascript/ google-maps/ google-maps-api-3

Question

I tried to make google maps for cities in jordan that will Show information about the city to the user when the marker clicked

My problem is When I tried to get the Marker that been clicked by the user ,it always send the last marker in the For-loop that instantiate the markers and give the information

The for-loop works will and Give each marker it's own title,label and give an event listener for each marker

How can I get the clicked marker ? 

 <!DOCTYPE html> <html> <head> <title>Gis Map</title> <style> .background {} p { background-color: white; } span { color: blue; } #Footer { width: 100%; height: 30px; position: relative; left: 0px; bottom: 0px; } #Footer_text { padding: 10px; color: black; background-color: #5B1B14; } #Fixed { position: fixed; top: 0px; left: 0px; height: 70px; width: 100%; z-index: 3; background-color: #5B1B14; } #Fixed_img_c { width: 20%; height: 100%; margin: 0 auto; } #Fixed_img { height: 100%; } .paragraphs { text-align: center; z-index: 1; font-size: 20px; width: 100%; color: red; } /*************************Menu*****************************/ .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0px; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } </style> </head> <body> <div id="Fixed"> <div id="Fixed_img_c"> </div> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script> <div class="container"> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">Something</a> <a href="#">Something</a> </div> <div id="map" style="width:100%;height:500px"></div> <script> var map; function initMap() { map = new google.maps.Map( document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(31.9, 35.8), mapTypeId: 'terrain' }); //jordan cities locations var locations = [ [31.8354533, 35.9674337], [31.186446, 35.6248844], [30.8071736, 35.5228078], [32.0522945, 35.9935951], [31.7157524, 35.7633807], [32.0321557, 35.655972], [32.3402518, 36.1527321], [32.2699656, 35.824437], [32.3415654, 35.7322292], [32.5525113, 35.81239], [30.2200923, 35.5467541], [29.5909744, 35.1750487] ] var info = [ ["Amman", 4.007256], ["Al_Karak", 316.629], ["Tafilah", 96.291], ["Zarqa ", 1.364878], ["Madaba ", 189.192], ["Balqa ", 491.709], ["Mafraq ", 549.948], ["Jerash ", 237.059], ["Ajloun ", 176.080], ["Irbid ", 1.770158], ["Ma'an", 144.083], ["Aqaba ", 188.160] ] var markers = new Array(); for (var i = 0; i < locations.length; i++) { var coords = locations[i]; var latLng = new google.maps.LatLng(coords[0], coords[1]); var marker = new google.maps.Marker({ position: latLng, map: map, label: info[i][0], title: info[i][0] }); var infowindow = new google.maps.InfoWindow({ content: info[i][1] + "" }); google.maps.event.addListener(marker, 'click', function() { openNav(); //changeText(); infowindow.open(map, marker); }); google.maps.event.addListener(map, 'click', function() { closeNav() }); } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&libraries=visualization&callback=initMap"> </script> <div id="Footer"> <p id="Footer_text" class="paragraphs">dufault</p> </div> </div> </body> </html>

2 answers

solution1
 7  2016-12-30 15:31:34

You need to associate the infowindow with the correct marker. One solution to that is function closure as demonstrated in the similar question: Google Maps JS API v3 - Simple Multiple Marker Example . For your code:

google.maps.event.addListener(marker, 'click', function(marker,i) {
 return function() {
  openNav();
  //changeText();
  // set the infowindow content for this marker (the function has closure on i)
  infowindow.setContent(info[i][1]+"");
  // open the infowindow on this marker (the function has closure on marker)
  infowindow.open(map, marker);
}}(marker,i));

proof of concept fiddle

code snippet: 

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } var map; function initMap() { map = new google.maps.Map( document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(31.9, 35.8), mapTypeId: 'terrain' }); //jordan cities locations var locations = [ [31.8354533, 35.9674337], [31.186446, 35.6248844], [30.8071736, 35.5228078], [32.0522945, 35.9935951], [31.7157524, 35.7633807], [32.0321557, 35.655972], [32.3402518, 36.1527321], [32.2699656, 35.824437], [32.3415654, 35.7322292], [32.5525113, 35.81239], [30.2200923, 35.5467541], [29.5909744, 35.1750487] ] var info = [ ["Amman", 4.007256], ["Al_Karak", 316.629], ["Tafilah", 96.291], ["Zarqa ", 1.364878], ["Madaba ", 189.192], ["Balqa ", 491.709], ["Mafraq ", 549.948], ["Jerash ", 237.059], ["Ajloun ", 176.080], ["Irbid ", 1.770158], ["Ma'an", 144.083], ["Aqaba ", 188.160] ] var markers = new Array(); for (var i = 0; i < locations.length; i++) { var coords = locations[i]; var latLng = new google.maps.LatLng(coords[0], coords[1]); var marker = new google.maps.Marker({ position: latLng, map: map, label: info[i][0], title: info[i][0] }); var infowindow = new google.maps.InfoWindow({ content: info[i][1] + "" }); google.maps.event.addListener(marker, 'click', function(marker, i) { return function() { openNav(); //changeText(); infowindow.setContent(info[i][1] + ""); infowindow.open(map, marker); } }(marker, i)); google.maps.event.addListener(map, 'click', function() { closeNav() }); } } google.maps.event.addDomListener(window, 'load', initMap);
 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="Fixed"> <div id="Fixed_img_c"> </div> </div> <div class="container"> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">Something</a> <a href="#">Something</a> </div> <div id="map" style="width:100%;height:500px"></div> <div id="Footer"> <p id="Footer_text" class="paragraphs">dufault</p> </div>

solution2
 2  2016-12-30 14:42:37

Try placing the listener in a function and pass the value you need

  var myFunctinForListener = function(aMarker, aInfoWindow) {
      google.maps.event.addListener(aMarker, 'click', function() {
          openNav();
          //changeText();
          aInfoWindow.open(map, aMarker);
        });
  }



  ....


      for (var i = 0; i < locations.length; i++) {
        var coords = locations[i];
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          label: info[i][0],
          title: info[i][0]
        });

        var infowindow = new google.maps.InfoWindow({
          content: info[i][1] + ""
        });


        myFunctinForListener(marker, inforwinodow);


    .....

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Get full address of clicked marker in google maps Get an onclick function on a google maps marker array Google maps API v3, can't get clicked marker Move google maps marker when button is clicked Google Maps: toggle KML when marker is clicked google maps - function geocode and marker Get Directions to a Google Maps Marker How do I use function argument to find exact clicked marker in google maps? Google Maps API v3 : Passing values to Listener function(), so as to make a circle when the marker is clicked? Google Maps API Polygon Infowindow Appears on Last Clicked Marker
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM