How to setup simple Google Maps on your website

Here’s a quick howto on setting up Google Maps on your website.

Ideal for “Contact Us” pages.

Go to http://code.google.com/apis/maps/signup.html
to get an API key for your website. An API key is a really long string
of random characters. You will get something that looks like this:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY_HERE"
type="text/javascript"></script>

Put this <script> tag on the page you want the map to appear on.

<script type="text/javascript">
//<![CDATA[
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GSmallMapControl());
var address = "1 James Street, Burleigh, QLD, Australia";
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(
"<strong>Address</strong><br>Type It Here:"+
" <br>Southport, QLD 4215<br>Australia.");
}
}
);
}
}
// this part uses jquery:
$(window).load(function(){loadmap()});
// if you dont have jquery, do something like:
window.onload = loadmap;
//]]>
</script>

<div id="map" style="width: 300px; height: 400px">
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *