🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

findus is a jQuery plugin that automatically generates customizable Google Maps with info windows from specified address strings or coordinates on your webpage.

Google-Maps

Documentation

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

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

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

You May Also Like