i want create list of links dynamically array of objects control infowindow marker within google map.
for example have array called businesses , links should displayed businesses[0].name, businesses[1].name etc...
when click on link, display info box coriltes withit if had clicked on marker. have set wen click marker, previous info box closes , new 1 opens.
here's code:
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script src="http://code.jquery.com/jquery-1.5.js"></script> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 480px } </style> </head> <body> <div id="map_canvas" style="width:620px; height:480px"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var infowindow; (function(){ google.maps.map.prototype.markers = new array(); google.maps.map.prototype.addmarker = function(marker){ this.markers[this.markers.length] = marker; } google.maps.map.prototype.getmarkers = function() { return this.markers } google.maps.map.prototype.clearmarkers = function() { if(infowindow) { infowindow.close(); } for(var i=0; i<this.markers.length; i++){ this.markers[i].set_map(null); } } })(); var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var businesses = new array(); business = { name:"columbia gorge blue grass", description:"july 22-25, 2010 @ skamania county fairgrounds", address:codeaddress("1003 south 6th ave, kelso wa 98626"), lat:46.72, lng:-119.55, url:"http://www.columbiagorgebluegrass.net/", business_type:"getaway" }; businesses[0] = business; business = { name:"chips casino palace", description:"we deal in fun! la center, wa", lat:45.72, lng:-121.55, url:"http://www.chipscasino.com/", business_type:"golf" }; businesses[1] = business; business = { name:"skamania county fair & timber carnival", description:"august 11-15, 2010 @ skamania county fairgrounds", lat:45.50, lng:-122.55, url:"http://www.chipscasino.com/", business_type:"wine" }; businesses[2] = business; //this map positions when page loaded var latlng = new google.maps.latlng(46.88, -120.00); var myoptions = { zoom: 6, center: latlng, maptypeid: google.maps.maptypeid.roadmap } var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); (var = 0; < businesses.length; i++) { //alert(i); if(businesses[i].business_type == "wine"){ //http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=a|00cc99|000000 var icon = 'http://google-maps-icons.googlecode.com/files/wineyard.png'; }else if(businesses[i].business_type == "golf"){ var icon = 'http://google-maps-icons.googlecode.com/files/golf.png'; }else{ var icon = 'http://google-maps-icons.googlecode.com/files/festival.png'; } var latlng = new google.maps.latlng(businesses[i].lat, businesses[i].lng); map.addmarker(createmarker(businesses[i].name,latlng)); } function createmarker(name, latlng) { var marker = new google.maps.marker({ position:latlng, map: map, icon: icon, }); google.maps.event.addlistener(marker, "click", function() { if (infowindow) infowindow.close(); infowindow = new google.maps.infowindow({content: name}); infowindow.open(map, marker); console.log(); }); return marker; } function codeaddress(address) { var this_address = address; geocoder.geocode( { 'address': this_address}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { return results[0].geometry.lat; } else { alert("geocode not successful following reason: " + status); } }); } } $(document).ready(function(){ initialize(); }); </script> </body> </html> i'm not sure if need add eventlistener or add function call or what.
any appreciated.
thanks!
you can keep lookup array of ids of businesses google points indicating latlng of different businesses. when click on link, have business id somewhere. can proper latlng, call "new infowindow()" proper "position" passed in part of options: http://code.google.com/apis/maps/documentation/javascript/reference.html#infowindowoptions
Comments
Post a Comment