Web Design that taps into the haromny and vision of your dreams.

Getting Started with the Google Maps API

Introduction to the Google Maps API

By on in HTML/CSS

868 words, estimated reading time 4 minutes.

Google Maps Series
  1. Embed Google Maps on your Website
  2. Getting Started with the Google Maps API
  3. Adding Pins, Points and Routes to Google Maps API

In this tutorial series, I am going to show you how to incorporate Google Maps into your website, add pins to locations with balloon pop-ups, set waypoints and even add routes. We'll also see how you can get latitude and longitude coordinates in Google Maps.

The first thing you need to do is acquire a Google Maps API Key which is generated on your websites URL. This key is unique and can only be used on the website specified; however you can generate as many API keys as you like. In order to get an API key you will need a Google account. Head over to the Google Maps API Generator to get your key.

Google Maps
Google Maps

Once you have your key you can start to add a map to your pages.

The single most important line of code is that of loading the API. This can be done with the line below:

<script src="http://maps.google.com/maps?file=api&v=2&key=***PUT YOUR KEY HERE***" type="text/javascript">

This will load the API from the Google servers.

The next thing to do is create a place holder on your page that will contain the map. In this example the place holder will be a div element with a width of 550px and a height of 350px. You can use your own dimensions and CSS for this.

<div id="map" style="width: 550px; height: 350px"></div>

The next section of JavaScript can be cut & paste into your page. The only thing you many need to change is the ID for the place holder div.

<script type="text/javascript">
function initialize()
{
  if (GBrowserIsCompatible()) 
  {
    var map = new GMap2(document.getElementById("map"));
    map.setMapType(G_SATELLITE_MAP);
    map.setCenter(new GLatLng(53.0927,-4.0725), 12);
  }
}
 
function addLoadEvent(func) 
{
  var oldonload = window.onload;
  if (typeof window.onload != 'function') 
  {
    window.onload = func;
  } 
  else 
  {
    window.onload = function() 
    {
      if (oldonload)  
      {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(initialize);

And that's all the script you need to get a map.

Here is a xHTML skeleton containing the necessary code to display a map. You will only need to insert your API key.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps Example</title>
    <meta equiv="content-type" content="text/html; charset=utf-8" />
  </head >
  <body>
    <div id="map" style="width: 550px; height: 350px"></div>
 
<script src="http://maps.google.com/maps?file=api&v=2&key=***PUT YOUR KEY HERE***" type="text/javascript"></script>
<script type="text/javascript">
function initialize()
{
  if (GBrowserIsCompatible())
  {
    var map = new GMap2(document.getElementById("map"));
    map.setMapType(G_SATELLITE_MAP);
    map.setCenter(new GLatLng(53.0927,-4.0725), 12);
  }
}
 
function addLoadEvent(func)
{
  var oldonload = window.onload;
  if (typeof window.onload != 'function')
  {
    window.onload = func;
  }
  else
  {
    window.onload = function()
    {
      if (oldonload)
      {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(initialize);
</script>
 
  </body>
</html>
 

 

Types of Map

You can control what type of map to show using the map.setMapType function. In this example I'm using G_SATELLITE_MAP which is Google's aerial photography. You can also use the values below.

  • G_PHYSICAL_MAP - Normal Google Maps
  • G_SATELLITE_MAP - Satellite Photography
  • G_HYBRID_MAP - Hybrid Satellite with map overlay

You can set the map centre using map.setCenter and inserting the latitude and longitude coordinates for the location. The final number (12 in this example) is used to set the zoom level with 0 being zoomed out and 20 being maximum zoom.

How to get Latitude and Longitude from Google Maps

There are a few methods to get Latitude and Longitude coordinates from maps. The easiest is to right click on the map and select "What's Here?" which will re-centre the map and display the coordinates in the search text box. You may have to click on the green marker to get the lat/long coordinates to show.

Another way is to centre your desired location in the window and copy and paste the following JavaScript into the address bar.

javascript:void(prompt('',gApplication.getMap().getCenter()));

This will cause a little dialogue box to pop up displaying the coordinates which can be copied and pasted into your code.

Adding Controls to the Map

There are a variety of controls you can add to the map including a zoom control, navigation control and map types. They can all be added using map.addControl function. These lines should all be placed after map.setCenter in the example above.

map.addControl(new GSmallMapControl());

This will cause a small map control which has a small zoom and panning control which looks like the control below. To get any of the other views simply substitute it in place of GSmallMapControl. You can add more than one control by calling addControl again.

GSmallMapControl

GSmallMapControl
GSmallMapControl

map.addControl(new GSmallMapControl());

GSmallZoomControl3D

GSmallZoomControl3D
GSmallZoomControl3D

map.addControl(new GSmallZoomControl3D());

GLargeMapControl

GLargeMapControl
GLargeMapControl

map.addControl(new GLargeMapControl());

GLargeMapControl3D

GLargeMapControl3D
GLargeMapControl3D

map.addControl(new GLargeMapControl3D());

GScaleControl

GScaleControl
GScaleControl

map.addControl(new GScaleControl());

GMapTypeControl

GMapTypeControl
GMapTypeControl

map.addControl(new GMapTypeControl());

Last updated on: Wednesday 21st June 2017

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.