jQuery Plugin To Generate Google Static Maps Image and URL
| File Size: | 4.59 KB |
|---|---|
| Views Total: | 3089 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A lightweight jQuery plugin to generate a customizable static Google Maps image with a live map URL, by using Google Static Maps API.
How to use it:
1. Include jQuery library and the jQuery Static Google Maps plugin in the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/map.js"></script>
2. The Html.
<a class="liveMap" target="_blank" href="#"><img id="staticMap" src="" alt=""/></a>
3. The Javascript to generate a static Google Maps image from a custom location address.
var url = $.staticMap({
address: '1600 Amphitheatre Parkway, Mountain View, CA 94043, United States'
});
$('#staticMap').attr('src', url);
var urlLive = $.liveMapLink({
address: "1600 Amphitheatre Parkway, Mountain View, CA 94043, United States"
});
$('.liveMap').attr('href', urlLive);
4. Available options to customize the static Google Maps image.
zoom : 3, // the zoom level of the map,
width: 300, // image width
height: 300, // image height
address: 'USA', //could be string address or lat,lon("-3.444,3.222")
markerIcon: '', //url to custom icon
key: '', // google map key
sensor: false,
mapType: 'roadmap', // map type []
scale: 1 // helps when need map on mobile, need change scale to 2
This awesome jQuery plugin is developed by ShvedDmutro. For more Advanced Usages, please check the demo page or visit the official website.











