IMapper is a simple, lightweight, re-usable JavaScript library to help manage some common tasks associated with using the Google Map’s API within a web application. Here is a quick demo and tutorial on how to use IMapper. You can download the JavaScript file here.
To begin, you need a valid Google Maps API Key. Once you’ve gotten a key and have included the necessary Google JavaScript files as well as the jQuery library you can now load in IMapper library via a script tag.
Once all the necessary scripts have been included, you can initialize IMapper via the following code. Please note the use of the jQuery $(document).ready method:
$(document).ready(function() {
IMapper.initialize("#map", "Towson, MD 21204");
});
The first parameter is the ID attribute of some HTML element that will become a Google Maps element. For more information about this, please refer to the Google Maps API documentation. The second parameter is the initial center for the map; it can either be an address string or an array of latitude and longitude coordinates.
Now the fun part, adding markers to the map. This can be achieved by using the following piece of code:
IMapper.addMarker("8000 York Road Towson, MD 21252", {
id:1,
title:"Towson University",
body: "Towson University",
external:"#external_elem_id"
});
The first parameter passed to this method is an address string or an array of latitude and longitude coordinates. The second parameter is a hash of arguments. The first argument, ‘id’, is the ID for this marker. This argument is the only required argument. If this method is called without an ID argument nothing will be added.
The title argument is optional and will appear as the tool tip when you hover your mouse over the marker icon. The body argument is optional and will appear in the info window when you click on the marker. Finally, the external argument is either a jQuery object or a valid jQuery selector. This enables you to bind either a single or multiple external HTML elements to a given marker. Thus when you click on any of the external HTML elements, the map will center to that marker and display the info window.
It’s important to first call initialize before calling the addMarker method. I would also recommend placing any addMarker calls within a jQuery $(document).ready function. This will ensure that everything is fully loaded and initialized.
Below is the above code in action:
It is also possible to include some HTML within the body argument. This allows for more intricate messages to appear within the info window when you click on a marker (as well as any external HTML element that have been supplied).
IMapper will also automatically find the ideal amount of zoom as well as the correct center point so that all the markers are visible. It will also ensure that the map never becomes to far zoomed in. This is determined by the MAX_ZOOM variable defined at the beginning of the class.
Please note that the above map has a zoom level of 15 (as determined by MAX_ZOOM). This will always be the case when there is only one marker on the map.
Feel free to use this script on your own website or web application. It’s under the MIT License which is very flexible to whatever your needs may be. Please just give credit where it is due and notify me of any improvements to the code.