jQuery Plugin To Parse Address Text & Coordinates Into Google Maps - findus
File Size: | 21.6 KB |
---|---|
Views Total: | 2266 |
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.