javascript - Adding multiple markers to Google Map -
i'm looking add markers each business listed google map v3 api on page in top right hand corner.
i'm not sure how multiple postcodes, 1 use on individual business pages use urlencode dynamic postcodes stored in database.
here's code use individual pages:
<script src="http://maps.googleapis.com/maps/api/js?q=london&key=aizasybapedyfbbnwjtvt8w3ubom34y7g6vk69a&sensor=false"></script> var map; function initialize() { var mapoptions = { zoom: 15, center: new google.maps.latlng(51.511214,-0.119824), maptypeid: google.maps.maptypeid.roadmap }; var geolocate = function(address, callback) { $.ajax({ url: "http://maps.googleapis.com/maps/api/geocode/json", data: { "sensor": true, "address": address }, datatype: "json", success: function(d) { if (d.status == "zero_results") callback(false); if (d.results && d.results[0] && d.results[0].geometry) { callback({ "ne": d.results[0].geometry.bounds.northeast, "sw": d.results[0].geometry.bounds.southwest, "center": d.results[0].geometry.location }); } else callback(false); } }); }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); geolocate("<%=server.urlencode(""&rsadvert("contactpostcode"))%>", function(c) { map.setcenter(new google.maps.latlng(c.center.lat, c.center.lng)); }); } google.maps.event.adddomlistener(window, 'load', initialize); $('#mymodal').on('shown', function () { google.maps.event.trigger(map, 'resize'); })
the postcodes page generated in asp:
if rsdb_ads("contactpostcode") <> "" strtemphtml = "[contactpostcode]" strdb_advertitem = replace(strdb_advertitem, "<!--contactpostcode-->", strtemphtml) else strdb_advertitem = replace(strdb_advertitem, "<!--contactpostcode-->", "") end if
hoping can help..
just start, here how manage multiple markers. (copy & paste code html file , works ...) can adapt code writing out locations db etc. via classic asp:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google maps multiple markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 1000px; height: 1000px;"></div> <script type="text/javascript"> var locations = [ ['stadtbibliothek zanklhof', 47.06976, 15.43154, 1], ['stadtbibliothek diemediathek', 47.06975, 15.43116, 2], ['stadtbibliothek gösting', 47.09399, 15.40548, 3], ['stadtbibliothek graz west', 47.06993, 15.40727, 4], ['stadtbibliothek graz ost', 47.06934, 15.45888, 5], ['stadtbibliothek graz süd', 47.04572, 15.43234, 6], ['stadtbibliothek graz nord', 47.08350, 15.43212, 7], ['stadtbibliothek andritz', 47.10280, 15.42137, 8] ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 13, center: new google.maps.latlng(47.071876, 15.441456), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < locations.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } </script> </body> </html>
Comments
Post a Comment