jQuery Google Maps Plugin

by NOVUSIDEA

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<!--
https://developers.google.com/maps/documentation/javascript/tutorial?hl=de
https://developers.google.com/maps/documentation/javascript/styling?hl=de
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
http://www.hongkiat.com/blog/google-maps-styles/
-->
<div id="map" style="width:100%; height:100%">A Google Map</div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }

JavaScript

$(function () {
    $.fn.googlemaps = function (options, markers) {
        
        var settings = $.extend({
            mapCenter: [52.519564, 13.407226],
            zoom: 10,
            styleId: google.maps.MapTypeId.ROADMAP,
			markers: [],
			layers: []
        }, options);
        
        var styles = [
            {
                "stylers": [
                    { "visibility": "on" },
                    { "gamma": 1.8 },
                    { "lightness": 18 },
                    { "saturation": -100 }
                ]
            },{
                "featureType": "road",
                "stylers": [
                    { "visibility": "on" },
                    { "hue": "#ff0008" },
                    { "saturation": 70 },
                    { "gamma": 0.52 },
                    { "lightness": 33 }
                ]
            },{
                "featureType": "water",
                "elementType": "geometry.fill",
                "stylers": [
                    { "hue": "#0066ff" },
                    { "visibility": "on" },
                    { "saturation": 63 },
                    { "lightness": -10 },
                    { "gamma": 1.27 }
                ]
            }
        ];  

        var map = new google.maps.Map(document.getElementById("map"), {
            mapTypeControlOptions: {  
                mapTypeIds: ['Styled']  
            },
            center: new google.maps.LatLng(settings.mapCenter[0], settings.mapCenter[1]),
            zoom: settings.zoom,
            //mapTypeId: settings.styleId
            mapTypeId: 'Styled'
        });
        
        var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });  
        map.mapTypes.set('Styled', styledMapType);  
        
        for(i = 0; i < settings.markers.length; i++){
            var latitude = parseFloat(settings.markers[i].latLng[0]);
            var longitude = parseFloat(settings.markers[i].latLng[1]);
        
            var...