Sai lying on a green grass
Green grass, blue sky and handmade Okinawan sai. That is the essence of Ryukyu Kobujutsu in Eira, Helsinki, Finland.

Google Static Map parameter exploration form

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 = '';

        // 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 site which uses both Static Maps and Google Maps JavaScript API version 3.