Dan Olsavsky's Blog

Monday, October 22, 2007

Embedding Google Maps

The Objective.

This tutorial will show you how to embed a Google Map in to a website. You will need to create a Google account if you do not have one already. I broke the process down in to five simple steps and included a link to a working example.

The Header.

Insert the following tags in the <head> of your document. Then, edit the Google API key below (key=GoogleAPIkey).

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAoMOJatw3uyEScB50Mr77zxTbBjeJC5OepS89rel7GdJxD1-WLRS2pZIcAM7oxTtSFl3u5DcA6NQK3w" type="text/javascript"></script>
<script language="JavaScript" src="maps.js"></script>
<link href="map.css" rel="stylesheet" type="text/css" />

The Body Tag.

Replace Body Tag with the following code:

<body onload="load()" onunload="GUnload()">

The HTML.

Insert the map <div> where ever you would like your map to be displayed

<div id="map"></div>

The JavaScript

Save the JavaScript below as "maps.js", modify, then go to Geocoder to get the new GPoint Coordinates. NOTE: You can now click the "Link to this page" hotlink on Google Maps, to find the coordinates. Simply copy and paste from the line of HTML code.

function load() {
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-104.924927, 39.861263);
var point2 = new GPoint(-105.208168, 39.786906);

var html = '<br /><b>Dan Olsavsky</b><br />Denver, CO';
html += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
html += '<i>Directions to here from</i>: <br />';
html += '<input type="text" name="saddr" value="" size="25"><br />';
html += '<input type="hidden" name="daddr" value="Denver, CO" />';
html += '<input type="hidden" name="hl" value="en">';
html += '<input type="submit" value="Directions"/></form>';

var htm2 = '<br /><b>Dan Olsavsky</b><br />Golden, CO';
htm2 += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
htm2 += '<i>Directions to here from</i>: <br />';
htm2 += '<input type="text" name="saddr" value="" size="25"><br />';
htm2 += '<input type="hidden" name="daddr" value="Golden, CO" />';
htm2 += '<input type="hidden" name="h2" value="en">';
htm2 += '<input type="submit" value="Directions"/></form>';

//Create Marker
var marker = new createMarker(point, html);
var marker2 = new createMarker(point2, htm2);

//Edit Controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 9);

//Add Overlay
map.addOverlay(marker);
map.addOverlay(marker2);

//Add info window
marker.openInfoWindowHtml(html);
marker.openInfoWindowHtml(html2);

}
}

The CSS
Create a style sheet named "map.css" and create a selector for the map id.

/* Google Map CSS */
#map {
width:400px;
height:400px;
}

The Example.

http://danolsavsky.com/map.html

Help.

Google Maps Wiki

Advanced

http://www.econym.demon.co.uk/googlemaps/index.htm

posted by dano at 10:14 AM

0 Comments:

Post a Comment

<< Home

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.