Static Maps API offered by Google provides an easy and fast way to create simple map image with none to few markers.
As an example, attached is a simple html page containing a form for collection different options and compiles them to an URL. Each time a value in the form is changed, the map image is updated to reflect that change.
This example uses jQuery for making the use of javascript consistent between browsers, now even in mobile devices, which is loaded from Google's CDN.
As for the javascript point of view, below is the most interesting part of the example.
$(document).ready(function() {
// As per change of each of the form elements the image is updated
$('#export_form input, #export_form select').change(function(){
// Base url to access the static maps API
var url = 'http://maps.google.com/maps/api/staticmap?';
// The list of parametres
var values = ['sensor=false'];
// Gather all the select and input elements from within the form.
var items = $('#export_form input, #export_form select');
// Names of those fields that are used for the map directly
var fields = ['maptype', 'language', 'format', 'zoom', 'size'];
var len = fields.length;
for (var i = 0; i < len; ++i) {
var field = fields[i];
var val = '';
// If the item in quiestion is not select, then it must be input
if (items.filter('select[name=' + field + ']').size() > 0) {
val = items.filter('select[name=' + field + ']').val();
}
else {
val = items.filter('input[name=' + field + ']').val();
}
values.push(field + '=' + val);
}
url += values.join('&');
// Marker requires special attention
url += '&markers=color:' + $('#export_form input[name=color]').val() +
'|label:' + $('#export_form input[name=label]').val() + '|' +
center[0] + ',' + center[1];
// Finally update the source of the image
$('#exportpreview').attr('src', url);
});
});
The reason why I am exploring to this Google API this time, is due to the upcoming renshuu.paazmaya.com site which uses both Static Maps and Google Maps Javascript API version 3.