Fork me on GitHub

jquery-findus

Create contact-maps easily.

This plugin lets you quickly build a customizable map without hassling with google maps api.

Usage

Include dependencies

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="jquery.findus.min.js"></script>

Provide some content containing a geocodeable address:

Find us here
8411 Market Street
San Francisco
CA 94103
<div class="findus">
  <h5>Find us here</h5>
  <address>
  8411 Market Street<br/>
  San Francisco<br/>
  CA 94103<br/>
  </address>
</div>

Initialize findus:

$('.findus').findus();

Options

NameDescription
addressA geocodeable address string
autoShowSpecifies whether to show info-window on render. Defaults to true.
bindResizeSpecifies whether to bind window resize. Defaults to true.
contentHTML content to be shown in info-window. A geocodeable string can be explicitly defined by containing it in an address-tag.
latitudeLocation coordinate latitude
longitudeLocation coordinate longitude
infoOptions passed to the info-window instance
mapOptions passed to the map instance. Defaults to
{
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true,
  draggable: false,
  zoomControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true
}
markerOptions passed to the marker instance

You can also use data-attributes to setup the component. Target options by using prefixes, such as 'marker-icon'.

Changelog