Want to add a map to your website? Show people where you are located or how to find your company?
The first thing you need to do is create the javascript. It is easier to keep it in a separate file, so create a file called “mygooglemap.js”. Then use the following javascript as a rough guide:
function googlemap(){
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
//The next line contains your coordinates
map.centerAndZoom(new GPoint(50.985876, -1.370662), 7);
var icon = new GIcon();
icon.image = "src/icon.png";
icon.shadow = "src/iconshadow.png";
icon.iconSize = new GSize(40, 40);
icon.shadowSize = new GSize(56, 40);
icon.iconAnchor = new GPoint(20, 40);
icon.infoWindowAnchor = new GPoint(20, 20);
var point1 = new GPoint(-78.821683, 43.018429);
var marker1 = new GMarker(point1, icon);
var point1HTML = "<div style='font-family: Verdana; font-size: 10px;'>Address & Phone Number goes here</div>";
GEvent.addListener(marker1, "click", function() {marker1.openInfoWindowHtml(point1HTML);});
map.addOverlay(marker1);
//]]
}
Then, add this code between the <head> tags in your HTML:
<script src=”http://maps.google.com/maps?file=api&v=1&key=YourMapsAPIKey” type=”text/javascript”></script>
Replace YourMapsAPIKey with your Google Maps API Key. If you don’t have one, you can request one: http://www.google.com/apis/maps/signup.html
Then, place this code in your HTML source, where you want the map to appear:
<div id=”map” style=”width: 555px; height: 450px; margin: 10px;”></div>
<script type=”text/javascript” src=”mygooglemap.js”></script>
<img src=”src/anyfile.gif” width=”1″ height=”1″ onload=”googlemap();”>
Make sure you have a dummy (blank) image somewhere on your site, to replace “src/anyfile.gif”.
You can see another implementation here : http://gibsontrimming.com/find_us.php
