Home > Web Front-end > H5 Tutorial > How to add Google location information to your website_html5 tutorial tips

How to add Google location information to your website_html5 tutorial tips

WBOY
Release: 2016-05-16 15:51:53
Original
1437 people have browsed it

We can easily get the current location using HTML5 navigation object. Please follow the steps below to get city/country details.

Include jQuery library first

JavaScript CodeCopy content to clipboard
  1. jQuery(function() {
  2. //call navigator object to get latitude and logtitute
  3. if(navigator.geolocation) {
  4. //getting current latitude and longtitude
  5. navigator.geolocation.getCurrentPosition(function(position) {
  6. //get location details based on latitude and longtitude from Google
  7. var jsonUrl = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" position.coords.latitude "," position.coords.longitude
  8. jQuery.getJSON(jsonUrl , function( data ) {
  9. var results = data.results[0];
  10. console.info(results); //check firebug
  11. alert(results.address_components[5].long_name); //City
  12. alert(results.address_components[6].long_name); //State
  13. alert(results.address_components[7].long_name); //Country
  14. },
  15. function(){
  16. alert('Failed to get Location Details...');
  17. });
  18. return false;
  19. });
  20. }});

The above article on how to add Google positioning information to the website is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Original address: http://www.cnblogs.com/mivi/archive/2016/04/16/5398183.html

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template