roamiGmap

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

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

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'.

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();