Many in the field of web design will know that integrating a Google Map via the API isn’t an easy task. I hope the following tutorial will get you started in the right direction and encourage you to explore the Google Maps API a bit further.
Step 1 – Get an API Key
You will need to go here to require a domain specific API key before you begin. These keys are free to obtain and are vital to complete this process.
Once you have entered your web address, you can then copy and paste the “JavaScript Maps API Example” code. All you will need is the part that looks like this:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=API_KEY" type="text/javascript"></script>
Note: You will need to set “sensor=true_or_false” to either “sensor=true” or “sensor=false”. This setting is used to generate the users location, usually if they’re browsing on a device with some sort of navigational abilities. Your API key will be displayed where it says “API_KEY”.
Step 2 – Create your PHP page
You will then need to add that snippet of javascript within your tags. My final Google map PHP page will look like this:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=API_KEY" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
function initialize() {
if (GBrowserIsCompatible())
{
// Display our maps div
document.getElementById("googleMap").style.display = 'block';
// Setup our map basics w/ control (centred on user location)
var map = new GMap2(document.getElementById("googleMap"));
map.setCenter(new GLatLng(52.455079,-1.19972), 14);
var givenmaptypes = map.getMapTypes();
map.setMapType(givenmaptypes[3]);
map.addControl(new GSmallMapControl());
// Create a base icon for all of our markers that specifies icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(16, 16);
baseIcon.iconAnchor = new GPoint(0, 0);
baseIcon.infoWindowAnchor = new GPoint(16, 0);
// Create our marker & point
var letterIcon = new GIcon(baseIcon);
letterIcon.image = "favicon.ico";
var point = new GLatLng(52.455079,-1.19972);
var markerone = new GMarker(point, {icon:letterIcon});
// Setup the user event listener
GEvent.addListener(markerone, 'click', function()
{
// When clicked on, show this info
markerone.openInfoWindowHtml("<img src=\"logo.gif\" width=\"144\" height=\"68\" alt=\"Any Logo\" />
<h3>This can be a Header</h3>
This can be any sort of body text
");
});
// Add the marker on the map
map.addOverlay(markerone);
}
}
// ]]></script>
<style type="text/css">#googleMap { width:600px; height:600px; }</style>
Read the next few sections (stick with it) to find out how it all works. Also, you should note that I set a width and height for the googleMap div – this is needed so the map knows what size it needs to be!
Step 3 – Make the Javascript File (The Fun Part…)
This next part will allow you to see some of the interesting functionality that using Google’s API can bring you.
The final javascript code will look like this:
//<![CDATA[
function initialize() {
if (GBrowserIsCompatible())
{
// Display our maps div
document.getElementById("googleMap").style.display = 'block';
// Setup our map basics w/ control (centred on user location)
var map = new GMap2(document.getElementById("googleMap"));
map.setCenter(new GLatLng(52.455079,-1.19972), 14);
var givenmaptypes = map.getMapTypes();
map.setMapType(givenmaptypes[3]);
map.addControl(new GSmallMapControl());
// Create a base icon for all of our markers that specifies icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(16, 16);
baseIcon.iconAnchor = new GPoint(0, 0);
baseIcon.infoWindowAnchor = new GPoint(16, 0);
// Create our marker & point
var letterIcon = new GIcon(baseIcon);
letterIcon.image = "favicon.ico";
var point = new GLatLng(52.455079,-1.19972);
var markerone = new GMarker(point, {icon:letterIcon});
// Setup the user event listener
GEvent.addListener(markerone, 'click', function()
{
// When clicked on, show this info
markerone.openInfoWindowHtml("<img src="\" mce_src="\""logo.gif\" width=\"144\" height=\"68\" alt=\"Any Logo\" />
<h3>This can be a Header</h3>
This can be any sort of body text
");
});
// Add the marker on the map
map.addOverlay(markerone);
}
}
//]]>
The first thing the code will do is target the div that you have set up to hold your map. This is defined by the line:
// Display our maps div
document.gtypeetElementById("googleMap").style.display = 'block';
This will load your map into the div with an id of googleMap that we place in our *.php file at the beginning of this tutorial.
The next section is where you can set up the initial parameters of your map, for example the point at which the map centres, the level of zoom, the type of map it displays (hybrid, satellite, etc.), and the controls.
// Setup our map basics w/ control (centred on user location)
var map = new GMap2(document.getElementById("googleMap"));
map.setCenter(new GLatLng(52.455079,-1.19972), 14);
var givenmaptypes = map.getMapTypes();
map.setMapType(givenmaptypes[3]);
map.addControl(new GSmallMapControl());
In order to get your Latitude and Longitude coordinates there is a very useful tool developed by Mike Mackay at http://www.mikemackay.co.uk/playground/google-maps-geocoder/. You can input a postcode and it will get converted to the specific Lat/Long coordinates.
Once you have your Lat/Long coordinates you can enter them at this line “map.setCenter(new GLatLng(52.455079,-1.19972), 14);”. This will centre the map to these coordinates. The number 14 symbolises the level of zoom that the map will display on load.
The line “map.setMapType(givenmaptypes[3]);” allows you to choose your map type. Changing the number will change the style of map that displays.
This next block in the javascript will allow you to set the base size of the icon that you will displaying as a marker.
// Create a base icon for all of our markers that specifies icon dimensions, etc. var baseIcon = new GIcon(); baseIcon.iconSize = new GSize(16, 16); baseIcon.iconAnchor = new GPoint(0, 0); baseIcon.infoWindowAnchor = new GPoint(16, 0);
The iconSize parameter allows you to specify the size of your icon. iconAnchor is where your icon will be positioned relative to your Lat/long coordinates (0, 0 being left, top). infoWindowAnchor is the coordinates of where the information bubble pops up – I have used 16, 0, which is right top (it is relative to the marker icon).
This next section is the most important part. Duplicating the following section allows you to add more than one marker to a map, using individual icons.
// Create our marker & point
var letterIcon = new GIcon(baseIcon);
letterIcon.image = "favicon.ico";
var point = new GLatLng(52.455079,-1.19972);
var markerone = new GMarker(point, {icon:letterIcon});
// Setup the user event listener
GEvent.addListener(markerone, 'click', function()
{
// When clicked on, show this info
markerone.openInfoWindowHtml("<img src="\" mce_src="\""logo.gif\" width=\"144\" height=\"68\" alt=\"Any Logo\" />
<h3>This can be a Header</h3>
This can be any sort of body text
");
});
// Add the marker on the map
map.addOverlay(markerone);
The line “letterIcon.image = “favicon.ico”;” allows you to specify the marker icon that will be used. I have used our favicon as the icon. The line “var point = new GLatLng(52.455079,-1.19972);” specifies the point at which the marker will be placed (Use the postcode Geocoder by Mike Mackay to get the coordinates).
this line is important – “var markerone = new GMarker(point, {icon:letterIcon});”. It sets a variable of markerone which is then later placed on the map. By changing this to markertwo or markerthree you can place more than one marker on the map (You will need to change every reference to this, I will give an example code with more than one marker at the end).
This line “GEvent.addListener(markerone, ‘click’, function()” sets up a listener so that when your icon is clicked the following bubble is displayed:
markerone.openInfoWindowHtml("<img src="\" mce_src="\""logo.gif\" width=\"144\" height=\"68\" alt=\"Any Logo\" />
<h3>This can be a Header</h3>
This can be any sort of body text
");
This can then be customised to display whatever you want. I have it displaying an image of our logo (I have cancelled out the double quotation marks to stop any errors in the img tags). you can set headings, p tags, links and more – just don’t forget to cancel out any double quote marks used.
Step 3(a) – Multiple Markers
The following code would display two markers, and the process can be repeated to display as many as you’d like.
//<![CDATA[
function initialize() {
if (GBrowserIsCompatible())
{
// Display our maps div
document.getElementById("googleMap").style.display = 'block';
// Setup our map basics w/ control (centred on user location)
var map = new GMap2(document.getElementById("googleMap"));
map.setCenter(new GLatLng(52.455079,-1.19972), 14);
var givenmaptypes = map.getMapTypes();
map.setMapType(givenmaptypes[3]);
map.addControl(new GSmallMapControl());
// Create a base icon for all of our markers that specifies icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(16, 16);
baseIcon.iconAnchor = new GPoint(0, 0);
baseIcon.infoWindowAnchor = new GPoint(16, 0);
// Create our marker & point
var letterIcon = new GIcon(baseIcon);
letterIcon.image = "favicon.ico";
var point = new GLatLng(52.455079,-1.19972);
var markerone = new GMarker(point, {icon:letterIcon});
// Setup the user event listener
GEvent.addListener(markerone, 'click', function()
{
// When clicked on, show this info
markerone.openInfoWindowHtml("<img src="\" mce_src="\""logo.gif\" width=\"144\" height=\"68\" alt=\"Any Logo\" />
<h3>This can be a Header</h3>
This can be any sort of body text
");
});
// Add the marker on the map
map.addOverlay(markerone);
// Create our marker & point
var letterIcon = new GIcon(baseIcon);
letterIcon.image = "favicon.ico";
var point = new GLatLng(52.455079,-1.19972);
var markertwo = new GMarker(point, {icon:letterIcon});
// Setup the user event listener
GEvent.addListener(markertwo, 'click', function()
{
// When clicked on, show this info
markertwo.openInfoWindowHtml("<img src="\" mce_src="\""logo.gif\" width=\"144\" height=\"68\" alt=\"Any Logo\" />
<h3>This can be a Header</h3>
This can be any sort of body text
");
});
// Add the marker on the map
map.addOverlay(markertwo);
}
}
//]]>
Step 4 – That’s it!
Now when you load your page, you should have a Google Map displayed, with a custom icon (or icons) and a custom location. Happy API’ing.
