[JavaScript - Google Maps] Maps with custom styles and map markers. #javascript #jquery

google-maps.js

// sanity checks
var $map = $('.map-container');
if ($map.length) {
    // on page load, run the main map handler
    google.maps.event.addDomListener(window, 'load', originsMap);
}

// custom map style. see: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
var mapStyle = [{featureType:'water',elementType:'all',stylers:[{hue:'#281d01'},{saturation:100},{lightness:-89},{visibility:'simplified'}]},{featureType:'landscape',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:47},{lightness:-39},{visibility:'on'}]},{featureType:'road',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:-39},{lightness:-15},{visibility:'off'}]},{featureType:'poi',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:32},{lightness:-30},{visibility:'off'}]},{featureType:'administrative.province',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:61},{lightness:7},{visibility:'off'}]},{featureType:'administrative.locality',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:61},{lightness:54},{visibility:'off'}]},{featureType:'administrative.country',elementType:'labels',stylers:[{hue:'#cba026'},{saturation:68},{lightness:-7},{visibility:'off'}]},{featureType:'administrative.country',elementType:'geometry',stylers:[{hue:'#cba026'},{saturation:68},{lightness:-7},{visibility:'off'}]}];

function originsMap() {
    // make full screen map size
    $('#map').css({
        width: $(document).width(),
        height: $(document).height()
    });

    // map options
    var styledMap = new google.maps.StyledMapType(mapStyle, {name: "Styled Map"});
    var marker, mapOptions, mapCenter, mapZoom;

    mapCenter = new google.maps.LatLng(10, 15);
    mapZoom = 3;

    var mapOptions = {
        // map centering & zooming
        center: mapCenter,
        zoom: mapZoom,

        // map controls
        scrollwheel: false,
        disableDefaultUI: true,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };

    // initiate map
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    // apply map styles
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    // loop through a set of map coordinates and assign the map marker.
    // in this case, the "mapMarker" variable is an external JSON data.
    $.each(mapMarkers, function(i, val) {
        for (var i = 0; i < val.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(val[i][0], val[i][1]),
                map: map
            });
        };
    });
}