Find your user location and showcase them in Googlemap instantly
Last active
August 29, 2015 14:19
-
-
Save SamvelRaja/40e2c8240a74e3894a2b to your computer and use it in GitHub Desktop.
LocateMe
This file contains 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
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> | |
| <h1>Testing out Google maps API</h1> | |
| <br> | |
| <div id="map" style="width:500px;height:300px;"> | |
| </div> |
This file contains 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
| //Function which helps to locate the postion of the user | |
| var locateMe = function(){ | |
| map_element= document.getElementById('map'); | |
| if (navigator.geolocation) { | |
| var position= navigator.geolocation.getCurrentPosition(loadMap); | |
| } else { | |
| map_element.innerHTML = "Ehhh...Geolocation is not supported by this browser."; | |
| } | |
| }; | |
| //Lets load the mop using the position | |
| var loadMap = function(position) { | |
| var latitude=position.coords.latitude; | |
| var longitude=position.coords.longitude; | |
| var myLatlng = new google.maps.LatLng(latitude, longitude); | |
| //Initializing the options for the map | |
| var myOptions = { | |
| center: myLatlng, | |
| zoom: 15, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| }; | |
| //Creating the map in teh DOM | |
| var map = new google.maps.Map(document.getElementById("map"),myOptions); | |
| //Adding markers to it | |
| var marker = new google.maps.Marker({ | |
| position: myLatlng, | |
| map: map, | |
| title: 'You are here' | |
| }); | |
| //Adding the Marker content to it | |
| var infowindow = new google.maps.InfoWindow({ | |
| content: "<h2>You are here :)</h2>", | |
| //Settingup the maxwidth | |
| maxWidth: 300 | |
| }); | |
| //Event listener to trigger the marker content | |
| google.maps.event.addListener(marker, 'click', function() { | |
| infowindow.open(map,marker);}); | |
| }; | |
| //Calling the locateMe function onLoad | |
| window.onload= locateMe; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment