jQuery Plugin To Embed A Google Map In Website With A Good Looking - Pretty Maps

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

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.