Google offers several APIs for its mapping service, and one of these includes a geocoding option. That means you don't even need to give it coordinates, an address is enough! We are going to use this to add a 'Location' field to your edit entry screen. Putting an address in that field will automatically add a google map to your published entry.
So, how does it work?
And you're done! You can now enter any address you want into the 'Location' custom field which has become available on your entry posting screen, and whenever you do, there will be a google map present in the published entry. Note: if you don't see the 'Location' custom field at first, try clicking on 'Display Options' first to see if you might need to activate the field first.
Just to demonstrate, I've added a map to this entry pointing out where I live:
So, how does it work?
- Get your free Google maps API key here: http://code.google.com/intl/nl/apis/maps/signup.html
- Create a custom field for the entries of your blog (let's call it 'Location'). If you are using the open source version of Movable Type, use the keywords or the entry extract field (you are probably not using them anyway).
- Stick this bit of code in the header section of your templates (between the <head> and </head> tags). Don't forget to replace the X'es with your own API key.
<script src="http://maps.google.com/maps?file=api&v=2.x&key=XXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
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(address);
}
}
);
}
}
</script>
- Put this bit of code into your entry template (i.e. the bit of template code to display individual entries). Feel free to adjust the height and width parameters for the div tag to make your map a different size. And if you are using a different field to store your location data in, make sure to replace the tag in the example below too...
<mt:If tag="EntryDataLocation">
<div id="map_canvas" style="width: 500px; height: 450px"></div>
<script>
initialize();
showAddress('<mt:entrydatalocation>');
</script>
</mt:if>
And you're done! You can now enter any address you want into the 'Location' custom field which has become available on your entry posting screen, and whenever you do, there will be a google map present in the published entry. Note: if you don't see the 'Location' custom field at first, try clicking on 'Display Options' first to see if you might need to activate the field first.
Just to demonstrate, I've added a map to this entry pointing out where I live:
Tweet
Leave a comment