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 (Interactive Version)

Geolocation Using HTML5, jQuery and Google Maps (Interactive Version)

0

Following on from the Static Google Maps example with Geolocation, this tutorial looks at creating a Interactive version using the JavaScript Google Maps API. This tutorial uses most of the code from the first tutorial, but replaces the static image with a Interactive version of Google Maps, so the user can move, zoom and navigate the map.

Interactive Google Maps

In order to use the Interactive map, you first need to obtain an API key from Google. The key needs to be used when including the Google Maps JavaScript library.

The above code needs to be included in the <head> tag of your HTML, replacing API_KEY_GOES_HERE with your Google API key. Below, you can find all the HTML and JavaScript code you need to detect the user’s location (via their Browser), load up Google Maps and drop a marker on their location.

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).

Documentation on using Google Maps and the JavaScript API can be found on the Google Developer Site.

Geolocation, HTML5, JavaScript, jQuery, Tutorial

Leave a ReplyCancel 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

Support Me

Buy Me a Coffee

PSN Profile

Tags

ACL Amazon Amazon Web Services Android Android 4.4 KitKat Android 5.0 Lollipop Apache Backup Bug Command Line Cordova cPanel / WHM Facebook Facebook Graph API Facebook PHP SDK 4.0 Facebook Social Plugins Fan Page Firewall Flash Gadget Geolocation Google Nexus 5 Hacking HTML5 iOS JavaScript jQuery Laravel 5 Linux NodeJS Parse PDF PHP Plugin Portfolio PS4 Review Security Server SSH SSL Sysadmin Tutorial WordPress WordPress Plugins
© 2011-2025 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