Last active
August 9, 2018 13:40
-
-
Save prashant-shahi/532408d54db72ce58a172a48c9eb73f1 to your computer and use it in GitHub Desktop.
Where Am I - Google Map
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script> | |
| function myMap() { | |
| var myCenter = new google.maps.LatLng(51.508742,-0.120850); | |
| var mapCanvas = document.getElementById("map"); | |
| var mapOptions = {center: myCenter, zoom: 5}; | |
| var map = new google.maps.Map(mapCanvas, mapOptions); | |
| var marker = new google.maps.Marker({position:myCenter}); | |
| marker.setMap(map); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,visualization&sensor=false"></script> | |
| <a href="#" id="showMyLocation">Where Am I</a> | |
| <div id="location">Postal Address</div> | |
| <div id="zipcode">Zip Code</div> | |
| <div id="map" style="width:80%;height:500px"></div> | |
| <script> | |
| $(function() { | |
| $("#showMyLocation").click(function(event) { | |
| event.preventDefault(); | |
| $(this).html('<h3>Determining address...</h3>'); | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| var geocoder = new google.maps.Geocoder(); | |
| var latLng = new google.maps.LatLng( | |
| position.coords.latitude, position.coords.longitude); | |
| geocoder.geocode({ | |
| 'latLng': latLng | |
| }, function(results, status) { | |
| for (var i = 0; i < results[0].address_components.length; i++) { | |
| var address = results[0].address_components[i]; | |
| if (address.types[0] == "postal_code") { | |
| $('#zipcode').html(address.long_name); | |
| $('#location').html(results[0].formatted_address); | |
| $('#showMyLocation').hide(); | |
| } | |
| } | |
| myMap(); | |
| }); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> | |
| <!-- | |
| To use this code on your website, get a free API key from Google. | |
| Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp | |
| --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment