How to integrate Google Maps into a web page

Google made a very nice API to enable people integrate Google Maps into their web pages with allot of options very easily. I’ll show some simple example but you need to understand few things:

  1. You need to apply for Google’s API key (Sign up for a Google Maps API key).
  2. Know little bit HTML and JScript.
  3. Read Google’s Documentation to understand the possibilities you have.

Now first you need to have a normal HTML file, inside this file you need to create <div> and you give it a name and size (or how it will be placed) where Google Maps will be placed.

example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Testing Google Maps!</title>
</head>
<body>

<div id=”my_first_map”></div>

</body>
</html>

You can control the size of the map to take the whole possible space and define the height so it will be like this

<div id=” my_first_map ” style=”width: 100%; height: 500px”></div>

After you get your API Key you will use it in the page you created

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Testing Google Maps!</title>

<script src=http://maps.google.com/maps?file=api&v=2&key=WHAT-EVER-Google-GIVES-YOU” type=”text/javascript”></script>

</head>
<body>
<div id=” my_first_map ” style=”width: 100%; height: 500px”></div>
</body>
</html>

Your file is ready to integrate the maps 😉

Add the following code to your page right after the jscript that contains the Google API Key
Let’s start with a full example explaining each part

<script type=”text/javascript”>
//<![CDATA[


function load() {

//Check if the browser is compatibale and rady to run the script (JScript)
if (GBrowserIsCompatible()) {

//Define Where the map will be loaded
var map = new GMap2(document.getElementById(“my_first_map “));

//add the map type function (Map; Satellite or Hybrid)
map.addControl(new GMapTypeControl());

//Add the Zoom-in and the Zoom-out Function
map.addControl(new GLargeMapControl());

//Add the small window at the lower right corner for over viewing the map
map.addControl(new GOverviewMapControl());

//Enable the scroll wheel Zoom function so you can zoom in and out with your mouse
map.enableScrollWheelZoom();

//define the Latitude and the Longitude point to be the center of the map also define the Zoom factor
map.setCenter(new GLatLng(33.32832753459011, 44.34682309627533), 12);

//Now we add an info Window by giving it the Latitude and the Longitude point and any kind of information we like to show (you can use HTML tags)
map.openInfoWindowHtml(new GLatLng(33.32832753459011, 44.34682309627533),” <b>Hello!</b> “);

//We add a marker on the map, here we give Latitude and the Longitude point and if the marker is draggable or not.
var marker1 = new GMarker(new GLatLng(33.32832753459011, 44.34682309627533), {draggable: false});
//we add an event listener that will open an info window when you click on the marker.
GEvent.addListener(marker1, “click”, function() {marker1.openInfoWindowHtml(“<b>where I used to live</b>”);});
//Add the marker object.
map.addOverlay(marker1)

}

}

//]]>
</script>

Hope that will help allot out there.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.