Learning never exhausts the mind

By

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());

 

Enjoyed this post? Why not share it!

If you enjoyed this post, please share it with others. Click one of the social media buttons below to share on Facebook, Twitter, LinkedIn, Pinterest or email to a friend.

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.