sebnilsson.com | Liquid Development Is What I Do
Seb Nilsson

jMapMarker - jQuery-Plugin to Easily Add Google Maps with Markers to Your Website

jQuery

Just uploaded my new project called jMapMarkers to GitHub.

It's a jQuery-plugin that easily allows the user to add one or more Google Maps-maps with markers and info-windows to the website.

It uses a simple object-literal as an argument for configuration when calling. To add a map to a div-tag with and ID, simple use the following code:

$('#map-placeholder').jMapMarkers({
    mapOptions: { // Straight Google Maps API-configuration
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    },
    markers: [
        { lat: '59.329444', long: '18.068611', title: 'Stockholm', desc: 'Capital of Sweden' },
        { lat: '59.949444', long: '10.756389', title: 'Oslo', desc: 'Capital of Norway' }
    ]
});

You can even add on more markers after the initial map has been added. Just leave out the mapOptions-argument in the configurations-arguments, like this:

$('#map-placeholder').jMapMarkers({
    markers: [
        { lat: 52.500556, long: 13.398889, title: 'Berlin', desc: 'Capital of Germany' },
        { lat: 48.8567, long: 2.3508, title: 'Paris', desc: 'Capital of France' },
        { lat: 51.507222, long: -0.1275, title: 'London', desc: 'Capital of England' }
    ]
});

You can find examples in the demo.html-file in the GitHub-project.

A big bonus-feature is that if you don't state otherwise the plugin will automatically zoom and move the map so that all markers are visible, after markers are added to the map.

As it say in the GitHub-README: please feel free to fork and/or give feedback.

Language Localization with Google Maps API

Google Maps

When you include a Google Maps to your website via the Google Maps JavaScript API uses the browser's set preferred language to display the texts. Sometimes this doesn't turned out as planned and you want to be able to override this with your own choice.

Changing language is done with an additional argument when referencing the script-file. The argument used is language.

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false&language=ja">

There is of course a reference to the supported languages and their language codes.

Region Localization

To set the language of the names of the countries, cities and other places, you can use the Region Localization.