Simple Google Map Example part 1

Posted on Jan 25, 2010 by Rich to Web Development

I think the more examples people post out there, the overwhelming some things might get. Google maps and the interaction between the code and the functionality behind it has for the most part, been something that some developers might might a little hard to deal with.

Well I am not trying to add to the confusion, but hopefully shed some light on this matter. I believe this example and straight to the point and pretty easy to understand.

Here we go.

What Does it do?

This example is pretty simple. It will render a map on a web page based on items that it sees in an XML file.

What Do I need?

You will need a couple of things.

1. First you are going to need a Google Map API Key. Dont worry this is way less complicated than you might think, but remember that an API key is based on a domain. So if you are testing everything on mysitedev.com you will need a new API key when you launch live to mysite.com.

2. You will need to get lattitude and longitude coordinates for the location(s) you wish to plot. I do it using google maps itself, but maybe there is something easier out there than you can share?

google-map-example

code for actual map file

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map Example</title>
<style>
*{margin:0;padding:0;}
body{background-color:#d9d9d9;text-align:center;}
.mapBox{width:640px;height:480px;display:block;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY"></script>
<script type="text/javascript">
//<![CDATA[
function load(lat, lng){
	if (GBrowserIsCompatible())
	{
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.setCenter(new GLatLng(lat, lng), 6);
 
		function createMarker(point, name, address, index)
		{
			// Create a lettered icon for this point using our icon class
			var letter = String.fromCharCode("A".charCodeAt(0) + index);
			var icon = new GIcon(baseIcon);
			icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
			var marker = new GMarker(point, icon);
			GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml("<p><strong>" + name + "</strong><p><p>" + address + "</p>");
		});
		return marker;
	}
	// Create a base icon for all of our markers that specifies the
	// shadow, icon dimensions, etc.
	var baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);
	// Grab actual information from the properties xml to use.     
	GDownloadUrl("properties.xml", function(data, responseCode)
	{
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			map.addOverlay(createMarker(point, markers[i].getAttribute("name"), markers[i].getAttribute("address"), i));
			}
	});
	}
}
//]]>
</script>
</head>
<body onload="load(28.551957,-81.419678)" onunload="GUnload()">
    <div id="map" class="mapBox"></div>
</body>
</html>

Please note that the line load(num,num) is the center of the map.

<body onload="load(28.551957,-81.419678)" onunload="GUnload()">

code for properties XML file.

<?xml version="1.0" encoding="utf-8"?>
<markers>
	<marker name="Walt Disney World Resort" address="7100 Municipal Drive Orlando, FL 32819" lng="-81.419678" lat="28.551957" />
	<marker name="Sea World Orlando" address="Orlando, FL 32821" lng="-81.458044" lat="28.420844" />
	<marker name="THAT Agency" address="120 S. Dixie Hwy WPB, FL 33401" lng="-80.049219" lat="26.725144" />
	<marker name="Art Deco Welcome Center" address="1200 Ocean Drive Miami Beach, FL 33139" lng="-80.125952" lat="25.795718" />
	<marker name="Daytona International Speedway" address="1801 W Internatl Speedway Blvd Daytona Beach, FL 32114" lng="-81.058674" lat="29.215856" />
</markers>

Click Here View a Working example using the code noted here

Later on we can look at how to create the properties.xml file dynamically using php as well as some other goodies. Stay Tuned.

Tags: Google Map, Google Map Api, html, Javascript

Comment By: whmcs themes

February 2nd, 2010 at 4:22 am

Good post and nice design, is this a regular template?.

Comment By: Bita

May 12th, 2010 at 11:27 am

very interesting. I tried the same example in Notepad and it worked but without de markers.Then I tried it in WEBDEV version 14, he gives me some errors. do you know WEBDEV IDE? HOW CAN I embbed that code in it?