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:
- You need to apply for Google’s API key (Sign up for a Google Maps API key).
- Know little bit HTML and JScript.
- 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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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.
|S|A|R|M|A|D| 