benignware / jquery-findus

Create contact-maps easily

jquery-findus

Create contact-maps easily.

A jquery-plugin that lets you quickly build a customizable map without hassling with google maps api.

Demo

Install

Include js 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="js/jquery.findus.min.js"></script>

Optionally include css

<link rel="stylesheet" href="css/jquery.findus.css">

Usage

Provide geocodeable content

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

Initialize findus

$(function() {
  $('.findus').findus();
});

Examples

Provide location

You may also reverse-geocode an address from a location:

<div class="findus" data-latitude="37.77485730000001" data-longitude="-122.41962339999998"></div>

Provide location and content

To avoid the geocoding service completely, provide both, an location and some content to show up in the map's info-window.

<div class="findus" data-latitude="37.77485730000001" data-longitude="-122.41962339999998">
  <h4>Find us here</h4>
  <p>
    8411 Market Street<br/>
    San Francisco<br/>
    CA 94103<br/>
    USA
  </p>
</div>

Options

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

Name	Description
address	A geocodeable address string
autoShow	Specifies whether to show info-window on render. Defaults to true.
bindResize	Specifies whether to bind window resize. Defaults to true.
content	HTML content to be shown in info-window. A geocodeable string can be explicitly defined by containing it in an address-tag.
latitude	Location coordinate latitude
longitude	Location coordinate longitude
info	Options passed to the info-window instance
map	Options passed to the map instance. Defaults to {   zoom: 15,   mapTypeId: google.maps.MapTypeId.ROADMAP,   disableDefaultUI: true,   draggable: false,   zoomControl: false,   scrollwheel: false,   disableDoubleClickZoom: true }
marker	Options passed to the marker instance

Changelog

Master

• Optimize content geocoding

v0.0.5

• Added fix for map-icons

v0.0.4

• Set map option 'draggable' to false by default

v0.0.3

• Fixed too strict jquery dependency

v0.0.2

• Added prefixed data-attributes.
• Changed zoom default to 14.
• Draggable map by default.

v0.0.1

• Initial Release