How can i add Infowindow and tooltip to multiple marker

匿名 (未验证) 提交于 2019-12-03 02:42:02

问题:

I am trying to add the infowindow and tooltip to the marker in my google map. I have tooltip.js and recipient_country.js file.There are no errors in firebug,but but no content is display in the browser.It should display the map with marker and each marker having tooltip and infowindow.But it says ReferenceError: key is not defined in createInfoWindow(marker,key);

 function createInfoWindow(marker,key){     //create an infowindow for this marker.     var infowindow = new google.maps.InfoWindow({            content:recipient_country[key].Country_Name,            maxwidth:250      });     //open infowindow on click event on marker.     google.maps.event.addListener(marker,'click',function(){       if(lastOpenInfoWin) lastOpenInfoWin.close();       lastOpenInfoWin = infowindow;       infowindow.open(marker.get('map'),marker);     }); }   // Here is where we create a tooltip for each marker,  //with content set to recipient_country[placeindex].value     function createTooltip(marker,key){       //create a tooltip       var tooltipOptions = {         marker:marker,         content:recipient_country[key].Country_Name,         cssClass:'tooltip'   //name of a css class to apply to tooltip       };       var tooltip = new Tooltip(tooltipOptions);     }     // used to keep trackk of the open Infowindow,so when     // new one is about to be open, we close the old one.      // Create map on DOM load     // I'm using an array of recipient_country(recipient_counrty.js) to populate the markers      function createMap(){         var geocoder = new google.maps.Geocoder();         var map = new google.maps.Map(document.getElementById('map_canvas'),{         center:new google.maps.LatLng(33.93911,67.709953),         mapTypeId:google.maps.MapTypeId.ROADMAP,         zoom:2,         disableDefaultUI:true,         zoomControl:true,         zoomControlOptions: {           style:google.maps.ZoomControlStyle.SMALL         },         mapTypeControl:true,         mapTypeControlOptions:{            style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,            position:google.maps.ControlPosition.TOP_CENTER         }        });         for(var j= 0; j < recipient_country.length; j++) {         (function(i) {          var building = recipient_country[i];          geocoder.geocode({'address':building.Country_Name}, function(results,status){            if(status == google.maps.GeocoderStatus.OK){             var marker = new MarkerWithLabel({               position:new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng()),               title:building.Country_Name,               map:map,               labelContent:building.value,               labelAnchor:new google.maps.Point(6,22),               labelClass:"labels",               labelInBackground:false,               icon:"pics/circle2.png"             });               createInfoWindow(marker,key);               createTooltip(marker,key);           }           else{                  console.log("Geocode was not  succcessful for the following reason:" + status);              }         });        })(j);        
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!