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.











