Three Handy Google Maps API Examples

Three Handy Google Maps API Examples
Page content

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.

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”

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

Google Maps JavaScript API Example

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

type=“text/javascript”>

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

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.

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.

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.

References

Author’s own experience

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

Screenshots by author