Simple Google Maps API Example

Recently I got to use the Google Maps Javascript API for the first time, which was a quite pleasant experience. The API is thoroughly documented and most of the parts I used just worked on the first try. This post tries to show how easy it is to use the Google Maps API for showing a dynamic map on a web page with some additional stuff added to it.

The Use Case

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.

Loading the Maps API Script

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.

index.html

The body only contains a div where we will put the map.

Some styling:

index.css

The HTML and CSS will stay the same throughout this text.

Creating the Map

Now we need some Javascript to load the map into the page. The object mapOptions contains map properties, which in this case only includes the mandatory ones. See MapOptions. The initial coordinates that defines the center of the map are hard-coded for this example.

index.js

At this point we have this:

Step 1

A map without anything added to it except the default Google Maps controls.

Location Marker

Next we will add a marker at the center of the map, marking the chosen location. We add and call the following function:

We set the markers position to the same coordinates as the center of the map and set it to non-clickable (for now). Just as for the map there is quite a lot of different properties to set on the marker. There are also many events you can listen to, for example a click event for the marker, which we will see later. Now we have this:

Step 2

Accuracy Circle

Now let’s add a circle denoting the accuracy of the location. For this we use the Circle, like this:

Here I’ve used most of the available properties for a circle. I think most of them are self-explanatory. The circle radius, as well as the accuracy, is specified in meters.

Added circle for the location accuracy:

Step 3

“Speech Baloon” with Address

One thing left; making the marker clickable to display the closest address. This is done with an InfoWindow and a Geocoder to get the address.

Let’s pretend we already have the address and instead create the info window. We’ll need to keep track of whether the window is open or not, so first we add a closure to do that:

When called with one argument the state is set to that argument and without arguments the function returns the current state. Now let’s add the info window. We need to listen to events from both the marker and the info window to know when to open and close the info window and to correctly track the state of the info window.

There is a listener for click events on the marker, which will toggle the info window, and a listener for the closeclick on the info window to keep track of the open/closed state.

OK, now we need to get hold of the address. We send in the coordinates to the geocoder and get the results in a callback:

The info window is only added if we actually get an address from the geocoder. The geocoder can also be used the other way around, i.e. by passing in an address and get coordinates back.

Now when you click on the marker the window with the address appears. You can click either the marker again or the little cross in the info window to close it.

Step 4

Finally!

Here is all the Javascript code for this example:

index.js

Feedback is welcome. :-)

10 Comments

  1. Jose Luis Garcinuno

    Great article, thank you very much. I hope to save a lot of time using your example as a guide.

  2. Anup Ludra

    This is plotting only one marker. What if there is a MS Access database where the query result needs to be geocoded to place multiple point markers. The query result gives Name, Lat, Long. Place marker by Lat , Long values and use Name as a Label. Do you have a way out for that??

  3. I appreciate your article. I kind of know about the technolies, but I like examples that are explained point for point. One learns a lot from that.

    The circle around the marker works in Chrome and Firefox, but not in Safari (on a Mac). Interesting!

  4. Taking the version number out of the maps.googleapis.com call allows the circle to work in Safari!

  5. Henrik Lundahl

    @Jose
    Glad you liked it. Thanks!

  6. Henrik Lundahl

    @Anup
    Every call to addMarker in my example code will put a new marker on the map, but the code only keeps track of one InfoWindow. If you remove the immediate function call at the definition of the infoWindowVisible function, like this:

    var infoWindowVisible = function () {
    var currentlyVisible = false;

    return function (visible) {
    if (visible !== undefined) {
    currentlyVisible = visible;
    }

    return currentlyVisible;
    };
    };

    … you can then call infoWindowVisible to get a function to track the InfoWindow state for each marker. If you call it at the beginning of addInfoWindowListeners like this:

    var infoWindowVisible = infoWindowVisible();

    … you don’t need to change anything else in addInfoWindowListeners.

    There might be more you’ll need to change to get your use case to work. Good luck!

  7. Henrik Lundahl

    @Peter
    Thanks!

    We haven’t encountered the problem with the circle in our project, but there we are still using version 3.6. It seems to me then that there is a bug in the 3.7 version that’s neither in 3.6 nor 3.8.

  8. Pete

    I really enjoyed the article. Something I’ve been looking for is how to use the ‘send to phone’ feature and would be interested if anyone has any information or resources on how to implement that feature.

  9. Jorge Cruz

    Good evening, I seek long time an article that could solve my problem, and its been perfect. Thank you!
    Rio de Janeiro – Jorge Cruz.

  10. woe

    Usefoul script, thanks.
    I am pretty noobie in javascript, can you hint me about infowindow show from the beginning? I modify

    var addInfoWindow = function (map, marker, address) {
    var infoWindowOptions = {
    content: “My location. Zoom for details. ” + address,
    maxWidth: 180,
    map: map
    };

    but not working. Thanks for your time.

Leave a Reply