The first step I did was to use some geographic coordinates retrieved via an AJAX call and display that location on a map. There should also be a marker that you can click to display information about the nearest address. Since the location originated from a smartphone, where the location data is based on nearest cell tower location, close-by wi-fi networks or GPS position, there is also an accuracy sent along with the coordinates. This should be displayed on the map as a circle around the location marker. This is the use case I intend to demonstrate here.
Let’s start with the HTML page. Apart from the Maps API I’ll only use the jQuery library (very little). You can remove the protocol specification from the jQuery and Maps API src attributes (e.g. “//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”) and it will work smoothly both with and without SSL. I’m keeping it here so it will work with the file protocol. When loading the Maps API script on a published web page you should also include an API key in the request. Version 3.7, which at time of writing is the release version (feature-stable), is used here.
<meta charset="UTF-8" />
<title>Simple Google Maps API Example</title>
<link type="text/css" rel="stylesheet" href="index.css" />
The body only contains a div where we will put the map.