roamiGmap jQuery Plugin Examples

Demo

Basic use

The HTML

To insert a map the first thing we must do is create a div and assign it a class or id so that we can reference it from our jQuery code on page load.

<div class="gmap"></div>
			

The JS

Unless we make parameters global, roamiGmap requires 2 parameters: key (your Google Maps Javascript API key) and center (the center point to use for the map).

The center parameter must be a string which can be an address, place, or latitude and longitude like so: '41.8339037,-87.8720447'.

$('.gmap')
.roamiGmap({
	key: '__your_API_key_here__',
	center: 'Chicago, IL',
});
			

Example

Here is a map centered to Chicago:

Preform searches on your map

Completely Customize your map

Aside from center which is required and zoom which is already part of defaults, you can pass any param that the Google Maps Javascript API takes when creating a map. The param mapOptions takes an object with all additional options you would like to pass. You can learn more about this here.

Below is an example of passing styles to the mapOptions param.

All the Map Class methods at your disposal

roamiGmap() returns the DOM elment that you attach the map to with a few helpful properties added. For example, the gmap object, references the object instantiated with the Map Class. So you can use gmap to control your map.

Here's an example of increasing the zoomon your map by 5 after it has loaded. For a list of all the methods go here.

Control the zoom

$('.el_selector').roamiGmap({
	center: 'Chicago, IL',
	onMapLoad: function(){
		var _zoom = this.gmap.getZoom();
		this.gmap.setZoom(_zoom + 5);
	}
});
			

Making Parameters Global

When adding multiple maps into one page you may want to set some default paramters so that you don't have to pass them everytime you load a map. We'll use the global object $.fn.roamiGmap.defaults for that.

Set default key

$.fn.roamiGmap.defaults.key = '__your_API_key_here__';

Load all maps in Chicago

$.fn.roamiGmap.defaults.center = 'Chicago, IL';

NOTE: Setting both examples above allows you to call a map like so: $('.gmap').roamiGmap();