Create Your Own Google Map

To create a google map do the following:

Get an Google Maps API Key, feel free to use your normal gmail account. Without this you can't use google maps.

Next insert this into the head of your html. Replacing "YOUR_KEY" with your key.
<br /><br /><script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOUR_KEY" type="text/javascript"></script> <br /><br />

Next, create a map div tag. Where ever you put this code, is where the map will actually display. The width and height tags will dictate the width and height of the map. This can be included in any other div tag or HTML tag.
<br /><br /><div id="divMap" style="width:550px; height: 450px"> </div> <br /><br />

Next copy this bit of code in the bottom of your page. (Why the bottom? because it has to happen AFTER the divMap. There are ways around this. Hint: try creating an onload body event)

<br /><br /> <br /><br /><script type="text/javascript"> <br /><br /> //<![CDATA[ if (GBrowserIsCompatible()) { // //creates a marker on the map //don't mess with this code // function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } // // Adds a marker on the map // You can mess with this function. // function addPoint(details,geoLat, geoLong) { var point = new GLatLng(geoLat,geoLong); var marker = createMarker(point,"<div style="'width:100px'"> " + details + "<\/div> ") <br /><br /> map.addOverlay(marker); <br /><br /> } <br /><br /> <br /><br /> <br /><br /> // Display the map, with some controls and set the initial location <br /><br /> var map = new GMap2(document.getElementById("divMap")); <br /><br /> map.addControl(new GLargeMapControl()); <br /><br /> map.addControl(new GMapTypeControl()); <br /><br /> map.setCenter(new GLatLng(43.907787,-79.359741),8); <br /><br /> <br /><br /> // <br /><br /> // Add as many markers/points/popups as you want <br /><br /> // <br /><br /> <br /><br /> addPoint("Somewhere out there!",43.65654,-79.90138); <br /><br /> <br /><br /> } <br /><br /> //]]> <br /><br /> <br /><br /> <br /><br /> <br /><br /> </script> <br /><br /> <br /><br />

And that's it.

So of course your going what is this? 3.907787,-79.359741 ???

Those are geocodes, they map to a specific point on the earth's globe. If you want to map to an address you will have to convert the address to a geocode. Google does this as well, but its not so simple. So I'll save it for a whole other post.

In the mean time, use this.