Created
October 25, 2012 04:53
-
-
Save trtg/3950475 to your computer and use it in GitHub Desktop.
how to draw markers on google maps with driving directions, use geocode addresses and use html5 geolocation features
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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: 500px; height: 400px;"></div> | |
| <script type="text/javascript"> | |
| //test of geocoding addresses | |
| var address = "901 E. Santa Clara St., San Jose, CA 95116"; | |
| var destination = "200 East Santa Clara Street, San Jose, CA 95113"; | |
| var map = new google.maps.Geocoder(); | |
| var map_center_lat=0; | |
| var map_center_lng=0; | |
| //html5 location api: | |
| navigator.geolocation.getCurrentPosition(function(d){ | |
| console.log(d); | |
| }); | |
| var locations = [ | |
| ['Bondi Beach', -33.890542, 151.274856, 4], | |
| ['Coogee Beach', -33.923036, 151.259052, 5], | |
| ['Cronulla Beach', -34.028249, 151.157507, 3], | |
| ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], | |
| ['Maroubra Beach', -33.950198, 151.259302, 1] | |
| ]; | |
| //use the user's current location as determined via html5 geolocation | |
| //to set the center of the map | |
| function drawMap(){ | |
| //center: new google.maps.LatLng(-33.92, 151.25), | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| zoom: 10, | |
| center: new google.maps.LatLng(map_center_lat, map_center_lng), | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }); | |
| var infowindow = new google.maps.InfoWindow(); | |
| var marker, i; | |
| for (i = 0; i < 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() { | |
| console.log("in click listener"); | |
| console.log(locations[i][0]); | |
| infowindow.setContent(locations[i][0]); | |
| infowindow.open(map, marker); | |
| } | |
| })(marker, i)); | |
| } | |
| } | |
| //The code below is all you need to geocode an address | |
| //if you pass lat,lng to map.geocode you will get the reverse geocoded address | |
| map.geocode({'address' : address }, function(results, status){ | |
| map_center_lat = results[0].geometry.location.lat(); | |
| map_center_lng = results[0].geometry.location.lng(); | |
| //this callback function gets called asynchronously so trying | |
| //to print the value of map_center_lat and lng outside of here | |
| //may give unexpected results | |
| console.log("map_center_lat " +map_center_lat); | |
| console.log("map_center_lng " +map_center_lng); | |
| //crazy quote escaping in action | |
| var directions_link = 'Click <a href=\'http://maps.google.com/maps?saddr=\x22'+address+ '\x22&daddr=\x22'+destination +'\x22\'>here </a> for driving directions to:<br> '+destination | |
| console.log(directions_link) | |
| locations.push([directions_link,map_center_lat,map_center_lng]) | |
| console.log(locations) | |
| drawMap(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It doesn't work