Web Niraj
  • Facebook
  • Flickr
  • Github
  • Linkedin
  • Twitter
  • YouTube
Online portfolio, code examples and developer blog
  • About
  • Contact
  • Portfolio
  • WordPress
Search the site...
  • Home
  • Blog
  • Geolocation Using HTML5, jQuery and Google Maps

Geolocation Using HTML5, jQuery and Google Maps

2

Geolocating a user using their browser (if supported) is quite easy using HTML5 and JavaScript / jQuery. In fact, it can be done in under 50 lines of code. I wrote up this quick and easy tutorial to help anyone wanting to use geolocation within a browser.

If your browser supports geolocation, the below code will give you a simple static Google Maps image showing your location:

geolocation-complete

The key to the entire tutorial is the below code. It’s what gets the browser to locate the user:

In Chrome, the browser will prompt the user to allow permission to access their location:

browser-geolocation-permission

The HTML:

The JavaScript:

Demo:

View a working demo of the this on jsbin. This is an exact copy of the code used above, and you can use jsbin to make clone of the code so you can edit it at your leisure. The code has been tested on Chrome, Firefox and Safari (on a Mac, make sure Location Services is enabled from System Preferences > Security & Privacy > Privacy tab).

Geolocation, HTML5, JavaScript, jQuery, Tutorial

2 comments on “Geolocation Using HTML5, jQuery and Google Maps”

  1. Justin says:
    February 14, 2013 at 3:14 PM

    This doesn’t work. What did you see this work on? I haven’t found one that works at all yet. I’ve been checking high and low.

    Reply
  2. Niraj Shah says:
    March 4, 2013 at 12:09 PM

    What browser did you test on? This example works on iOS, Android, Chrome, Safari and Firefox. Try out the code here: http://jsbin.com/egarin/latest

    You need to make sure you are including the jQuery library too. If you got any JavaScript errors, please post them here so I can take a look.

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

StackExchange / StackOverflow

profile for Niraj Shah on Stack Exchange, a network of free, community-driven Q&A sites

PSN Profile

Tags

Amazon Web Services Android Android 4.4 KitKat Android 5.0 Lollipop Apache API Application Backup Bug Command Line Cordova Example Facebook Facebook Graph API Facebook PHP SDK 4.0 Facebook Social Plugins Fan Page Flash Geolocation Google Nexus 5 Google Nexus One Hacking HTML5 Image Manipulation iOS iPhone JavaScript jQuery Laravel 5 Linux NodeJS Parse PDF PHP Plugin Portfolio Review Security Server SSH SSL Sysadmin Tutorial WordPress WordPress Plugins
© 2011-2022 Niraj Shah
  • Blog
  • Portfolio
  • WordPress
  • About Me
  • Contact Me
  • Privacy Policy
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Privacy Policy