Adding Google Maps to your site

While redesigning the Career Center website, I wanted to combine my Directions and Contact page into one. This would simultaneously simplify the user interface and reduce the amount of content on the site. One new feature that I wanted to integrate was an interactive Google Maps. It is relatively easy adding the Google Maps applet to your website, but the customization is where it can get tricky.

First, the final result.

Adding Google Maps to your site:

• Your first step is to request a Google AJAX API key.
• After you receiving your API key you will need to add the following scripts into the Head of your document:

 google.load("maps", "2");  // Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}
google.setOnLoadCallback(initialize);

• We’ll get to what all that means in a minute. Your next step will be to add the div that holds the map as well as set the width/height:

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

• Now, if you were to load your page, you’d see that a Google Maps applet has shown up on your site. You’ll notice that the location it is centered on is not Alabama. Unless you have intimate knowledge of our exact Latitude and Longitude, you’ll need to use an online tool to determine the position you want the map to center on. Insert these coordinates into the LatLng object. Also, you can increase or decrease the zoom level by changing the number(in this case ’13′) in the same object.
• If this is all you want to do, then you’re done. Otherwise, let’s customize this to be a little more user friendly.

Customizing your Google Maps applet:

• If you want to add panning/zooming controls, simply insert the following line inside the “initialize” function:

map.addControl(new GSmallMapControl());

• Another option is to add a point onto the map which are displayed using a marker. You can have several of these on your map and the only thing you need to know is the Latitude/Longitude. In my case, I simply chose to use the center coordinates from before:

var point = new GLatLng(33.214761, -87.545156);
map.addOverlay(marker);

• The final option that I chose to implement is an Info Window. This is the little bubble pop-up that shows when you click on the marker that we created earlier. I simply used the info window to display our address as well as a link to Google Maps with our address populated in the fields for easy directions(for brevity, I omitted the entire link). You need to add this object between the “var point” and “map.addOverlay” that we used above:

var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<a href='http://maps.google.com'>The Career Center</a><br />330 Ferguson Center<br />Tuscaloosa, AL<br />35487");
}
);

Now to put it all together:

 google.load("maps", "2");

// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new google.maps.LatLng(33.214635, -87.545199), 14);

var point = new GLatLng(33.214761, -87.545156);

var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<a href='http://maps.google.com'>The Career Center</a><br />330 Ferguson Center<br />Tuscaloosa, AL<br />35487");
}
);
map.addOverlay(marker);

}
google.setOnLoadCallback(initialize);

There are a lot of features available for the Google Maps API. I only covered some of the most basic ones that I wanted to see. If you are interested in customizing your Google Map even further, consult the Google Maps API documentation. If you have any problems or questions, leave a comment.

About these ads