Eric Binnion

Inserting Google Maps into a website is CRAZY easy! Usually what I would advise someone to do is to:

1. Go to Google Maps
2. Search for the address that you want to show on your map
3. Grab the embed code
4. Insert embed code in your website

Could it get any easier? Well, that really depends on what your development needs are. I recently completed a project for a client that owned a mobile BBQ restaurant. This client wanted a map on his website that he could easily update with the location of his mobile smoking pit. I didn’t think it made much sense to make the client do the 4 steps above just to update his map… So I decided to look into Geocoding a google map. This way, all my client had to do to update his map was to login and change the address.

For those that do not know, geocoding is essentially the process of taking an address and turning that into latitude and longitude coordinates. Google maps has geocoding baked in – FOR FREE!

Without further ado, below is some code on using geocoding with Google Maps.

This code goes in the head.

[code]
<script src="http://maps.google.com/maps/api/js?sensor=false&quot; type="text/javascript"></script>
[/code]

This code can go anywhere in the body.

[code]
<div id="map" style="width: 413px; height: 300px;"></div>

<script type="text/javascript">// <![CDATA[

var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(54.00, -3.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var geocoder = new google.maps.Geocoder();

var address = ‘3410 Taft Blvd Wichita Falls, TX 76308’;

geocoder.geocode( { ‘address’: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// ]]></script>
[/code]

You can update the size of the map by changing the width and height values of the #map div. To change the starting zoom level, change zoom. You can change the type of map by changing mapTypeId. And most importantly, you can change the address by changing the value in var address.

You should be able to plug this code in to your website and be good to go. This code will take the address in var address, Geocode it using Google, and then center the map with a marker at the address specified.

This is a fairly simple example of Geocoding, but you could take this code and make a map that will dynamically update with user input. In a future post, I will discuss how to integrate Geocoding into WordPress so that you can easily create and edit maps without having to get latitude and longitude coordinates.