Pin Me

Three Easy to Use Google Maps API Examples

written by: •edited by: Christian Cawley•updated: 3/27/2011

If you're developing a site with Google Maps you can take advantage of various useful features in the API, such as compass point rotation and overlays...

  • slide 1 of 5

    Google Maps API - Flexible and Easy to Use

    Google’s popular Google Maps service makes use of billions of satellite images collected together in a database and then made available to users based on location, search requests and many other criteria.

    In order to make this accessible for purposes other than “looking at your house", Google provide a Google Maps API (application programming interface) which means that you can configure Google Maps to behave in a specific way when you embed it on your web page.

    The learning curve with this API is gradual – beginners can get to grips with it straightaway while advanced users can take advantage of the functionality to deliver impressive results. To demonstrate what is possible, take a look at these Google Maps API examples.

  • slide 2 of 5

    Basic Google Maps API Example

    The key when developing a website with a Google Maps element is to start small. The following code segment comes from the Google Maps API page:

    <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Google Maps JavaScript API Example</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"

    type="text/javascript"></script>

    <script type="text/javascript">

    function initialize() {

    if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));

    map.setCenter(new GLatLng(37.4419, -122.1419), 13);

    map.setUIToDefault();

    }

    }

    </script>

    </head>

    <body onload="initialize()" onunload="GUnload()">

    <div id="map_canvas" style="width: 500px; height: 300px"></div>

    </body>

    </html>

    You will notice that this is split into the standard XHTML header, the JavaScript section where the Google Maps example is defined and the XHTML section where the map is called.

    The latitude and longitude of Palo Alto is defined with the map.setCenter method, which specifies the "GLatLng" of "37.4419, -122.1419".

    Basic Google Maps API Example Obviously this can easily be changed:

    map.setCenter(new GLatLng(54.4419, -8.1419), 13);

    …will start your map with a view of Country Sligo in the Republic of Ireland. Note the ,13); at the end of the string, which specifies the level of zoom. 0 is the furthest out while 15 is the closest.

    You can find the Latitude and Longitude for any location in Google Maps by opening a new browser windows, visiting maps.google.com, finding the location you want to start your map at and right-clicking the map, choosing What’s here? to display the coordinates in the search bar.

  • slide 3 of 5

    Compass Rotation Google Maps API Examples

    Another cool trick with Google Maps is to use some of the more recent features of the API to orientate your map view.

    This can be done with the selection of code above by adding the following on a new line after map.setUIToDefault();

    // Enable the additional map types within

    //the map type collection

    map.enableRotation();

    }

    function autoRotate() {

    // Determine if we're showing aerial imagery

    if (map.isRotatable) {

    // start auto-rotating at 3 second intervals

    setTimeout('map.changeHeading(90)', 3000);

    setTimeout('map.changeHeading(180)',6000);

    setTimeout('map.changeHeading(270)',9000);

    setTimeout('map.changeHeading(0)',12000);

    This adds the ability to rotate or auto-rotate the map view through 360 degrees in 90 degree steps.

  • slide 4 of 5

    Marking Items and Places of Interest

    Basic Google Maps API Example Various map overlays are available thanks to the Google Maps API. One of the most popular is the Info Window, which will enable you to highlight an interesting item to anyone viewing the map.

    All you need to do is add the following to the line after the map.setCenter method.

    map.openInfoWindow(map.getCenter(),

    document.createTextNode("Hello, world"));

    Obviously you can alter the displayed phrase: you might choose “We are here" for example if you’re advertising a business.

  • slide 5 of 5

    References

    Author's own experience

    Also confirmed current code at Google Maps JavaScript API V2 Basics, http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html

    Screenshots by author