jQuery Plugin To Embed A Google Map In Website With A Good Looking - Pretty Maps
File Size: | 6.69 KB |
---|---|
Views Total: | 5736 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Pretty Maps is a simple jQuery plugin that embeds a google map into your website with a good looking by changing it's color and replacing the location icon.
How to use it:
1. Include jQuery javascript library and jQuery Pretty Maps plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="maps.js"></script>
2. Include Google Maps JavaScript API v3 in the page.
<script src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
3. Create a container you want to embed the google map in.
<div class="my-map"></div>
4. Create a red google map and add an address in the javascript.
<script> $(function(){ $('.my-map').prettyMaps({ address: 'Melbourne, Australia', image: 'map-icon.png', hue: '#FF0000', saturation: -20 }); }); </script>
5. Parameters.
<script> $(function(){ $('.my-map').prettyMaps({ address: ['Melbourne, Australia'], zoom: 12, panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, scrollwheel: true, image: '', styles: [{ stylers: [ { hue: options.hue }, { saturation: options.saturation }, { lightness: options.lightness } ] }] }); }); </script>
Change logs:
2014-11-27
- added multi marker option
- fixed bug in example
This awesome jQuery plugin is developed by JeanMarcGoepfert. For more Advanced Usages, please check the demo page or visit the official website.