jQuery Plugin To Parse Address Text & Coordinates Into Google Maps - findus

jQuery Plugin To Parse Address Text & Coordinates Into Google Maps - findus
File Size: 21.6 KB
Views Total: 1705
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

How to use it:

1. Load jQuery library and the jQuery findus plugin in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.findus.min.js"></script>

2. Load the required Google Maps JavaScript API.

<script src="//maps.googleapis.com/maps/api/js"></script>

3. Initialize the plugin

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

4. A map can be quickly setup by providing an address. The location will be geocoded and the specified address ist printed into the infowindow.

<div class="findus" data-address="280 Broadway, New York, NY 10007, USA"></div>

5. When specifying coordinates, the address is reverse geocoded and printed into the infowindow.

<div class="findus" data-latitude="40.7142700" data-longitude="-74.0059700"></div>

6. The content of the infowindow can be customized by providing html as dom children or escaped data-attribute. If no other options are specified, the location will be geocoded by the content. A geocodeable string can be explicitly defined by containing it in an address-tag.

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

7. Use data-attributes to setup the component. Target object-options by using prefixes, such as 'marker-icon'.

<div class="findus"> data-auto-show="false"> data-marker-icon="information.png">
  <h5>Find us here</h5>
  <address>
    8411 Market Street<br/>
    San Francisco<br/>
    CA 94103<br/>
  </address>
</div>

8. Available options.

// A geocodeable address string
address: "",

// Whether to show info-window on render.
autoShow: true,

// Whether to bind window resize. 
bindResize: true,

// Location coordinate latitude
latitude: "",

// Location coordinate longitude
longitude: ""

// HTML content to be shown in info-window. 
// A geocodeable string can be explicitly defined by containing it in an address-tag.
content: "",
info: {
  // InfoWindow options
},
map: {
  // Map options
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true,
  draggable: false, 
  zoomControl: false, 
  scrollwheel: false, 
  disableDoubleClickZoom: true
},
marker: {
  // Marker options
  //animation: google.maps.Animation.DROP
},
minWidth: 0, 
minHeight: 440

This awesome jQuery plugin is developed by benignware. For more Advanced Usages, please check the demo page or visit the official website.