Final week I briefly touched on the customization conceivable outcomes of Google Maps, this week we’ll be taking a more in profundity see at what precisely you’ll be able customize. The alternatives accessible incorporate customization for all viewpoints of the outline such as:

  • Roads
  • Points of Interest e.g. Schools, Parks and Hospitals
  • Methods of Transport
  • Water
  • Landscape features e.g. Man made or Natural

This covers not as it were custom colors, but the symbols and content related with each component.

GETTING STARTED

This instructional exercise could be a take after on to my past instructional exercise presenting HTML5 and the Geo-location API and builds upon the customization of final weeks code test. It’s a great thought to examined them first as I’ll be jumping straight within the customization area. To urge us begun, here is our default jQuery plugin template:

(function ( $ ) {
    $.fn.CustomMap = function( options ) {
        var settings = $.extend({
            home: { latitude: 53.339381, longitude: -6.260533 },
            text: 'Web Development Blog | DeveloperDrive',
            icon_url: 'http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png',
            zoom: 15                
        }, options );
        
        var coords = new google.maps.LatLng(settings.home.latitude, settings.home.longitude);
             
        return this.each(function() { 
            var element = $(this);               
        }); 
    };
}( jQuery ));

Here we are making a standard jQuery plugin and characterizing its default settings. The default settings are a default area to center on, a few content to show when the area is clicked, the default zoom and a custom symbol to speak to the area.

As already appeared, including a Google Outline is calm simple. All you would like to supply is the default choices for it and initialize a modern Outline question. By default, we are getting to center on the co-ordinates given by the plugin choices. We are too aiming to sho the default controls and set the fashion of outline to Guide. The accessible sorts of outline are:

  • Hybrid
  • Roadmap
  • Satellite
  • Terain

The definition of each sort is accessible here. It is additionally conceivable to alter the default control to either a drop down or a flat bar. To do this you’ll indicate a custom MapTypeControlStyle question.

var options = {
    zoom: settings.zoom,
    center: coords,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    scaleControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.DEFAULT
    },
    overviewMapControl: true,    
};

var map = new google.maps.Map(element[0], options);
map-nostyle

We also saw last week how easy it was to add a custom marker to the map, this week we are also going to add some custom text that appears when the marker is clicked. To do this we use the InfoWindow class. Here we set the content to the value passed into our plugin, but this can be full HTML content not just plain text. This means you can add more complex content such as images, like this:

var settings = $.extend({
    home: { latitude: 53.339381, longitude: -6.260533 },
    text: '<div class="map-popup"><h1>Web Development Blog | DeveloperDrive</h1><br/><div class="logo"><img src="https://developerdrive.developerdrive.netdna-cdn.com/wp-content/themes/dd_flat/images/logor.png" /></div><div class="about">A web development blog for all your HTML5, WordPress and jQuery needs</div></div><div class="clear"></div>',
    icon_url: 'http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png',    
    zoom: 15
}, options );

Since the over HTML is rendered on screen, it is conceivable to utilize CSS to fashion it anything way you need.

div.map-popup {
    position: relative;            
}

div.map-popup h1{
    margin: 0px;
}

div.map-popup > div {
    display: inline-block;            
}

div.map-popup div.logo {
    width: 25%;
    float: left;
}

div.map-popup div.about {
    float: right;
    width: 75%;
}

.clear {
    clear: both;
}

Once we have our data window characterized, we ought to join a press occasion to the outline to really show the data substance. To do this, we utilize the addListener work, indicate the marker we need to join the occasion to, the sort of occasion and the work to call. At that point it is as basic as calling .open strategy on the data question.

var icon = { 
    url: settings.icon_url, 
    origin: new google.maps.Point(0, 0)
};

var marker = new google.maps.Marker({
    position: coords,
    map: map,
    icon: icon,
    draggable: false
});

var info = new google.maps.InfoWindow({
    content: settings.text
});

google.maps.event.addListener(marker, 'click', function() { 
    info.open(map, marker);
});

Now that we have our essential outline total, we are able begin customizing it. To really fashion it we must construct up an cluster of styles, each fashion is connected to a particular include or all highlights. It is conceivable to indicate the:

  • Color
  • Gamma
  • Hue
  • Lightness
  • Weight

A full list of the options and what they are for is available here

A typical fashion will see something like this. Here we are expressing that the include we wish to fashion is of sort street, which we wish to fashion it’s geometry (e.g. the lines drawn that speak to a street). The genuine fashion is characterized by the stylers property and here we are setting the tint and immersion so that the streets show up a shinning blue

{
    featureType: "road",
    elementType: "geometry",
    stylers: [
        { hue: "#00ffee" },
        { saturation: 50 }
    ]
}

In this one we are specify that road labels are a brown color.

{
    featureType: "road",
    elementType: "labels",
    stylers: [
        { hue: "#4f2a0b" },
        { saturation: 50 }
    ]
}

The point is to construct up a collection of these rules or styles for each element/feature you want to alter. A full list of highlights is accessible here. For this instructional exercise, we are aiming to fashion the schools and parks as well as the streets as of now styled. Here I am as it were indicating colors or shades, but you’ll be able give styles for sub components of the geometery and name sorts. For illustration you’ll be able abrogate a names symbol color by utilizing the element type ‘labels.icon’;

var styles = [{
        featureType: "all",
        stylers: [
          { saturation: -80 }
        ]
    },{
        featureType: "road",
        elementType: "geometry",
        stylers: [
          { hue: "#00ffee" },
          { saturation: 50 }
        ]
    }, {
        featureType: "road",
        elementType: "labels",
        stylers: [
            { hue: "#4f2a0b" },
            { saturation: 50 }
        ]
    }, {
        featureType: 'poi.school',
        elementType: 'geometry',
        stylers: [
            { hue: '#4f2a0b' },
            { lightness: -15 },
            { saturation: 99 }
        ]
    }, {
        featureType: 'poi.park',
        elementType: 'geometry',
        stylers: [
            { hue: '#a3e36b' },
            { lightness: -15 },
            { saturation: 99 }
        ]
    }, {
        featureType: 'poi.park',
        elementType: 'labels.icon',
        stylers: [
            { hue: '#450b4f' },
            { lightness: -15 },
            { saturation: 99 }
        ]
    }
];

Once you have your collection of styles, you can simply call the setOptions method on your map and pass in the the styles collection

map.setOptions({styles: styles});

I trust you’ve found the over valuable in making your possess custom outline. The Google API documentation is lovely wordy, and there are bounty of other choices accessible for you to fashion and customize. You’ll be able discover all of the choices accessible to you here. I ought to moreover likely apologize for the awful colors I chose, they were picked to form it simpler to see what was being styled instead of their tasteful.

The plugin can be initialized using the following code

jQuery(document).ready(function() {
    jQuery('div.location').CustomMap();
});

and the final plugin looks like this:

(function ( $ ) {
    $.fn.CustomMap = function( options ) {
        var settings = $.extend({
            home: { latitude: 53.339381, longitude: -6.260533 },
            text: '<div class="map-popup"><h1>Web Development Blog | DeveloperDrive</h1><br/><div class="logo"><img src="https://developerdrive.developerdrive.netdna-cdn.com/wp-content/themes/dd_flat/images/logor.png" /></div><div class="about">A web development blog for all your HTML5, WordPress and jQuery needs</div></div><div class="clear"></div>',
            icon_url: 'http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png',    
            zoom: 15                
        }, options );
        
        var coords = new google.maps.LatLng(settings.home.latitude, settings.home.longitude);
             
        return this.each(function() {    
            var element = $(this);
            
            var options = {
                zoom: settings.zoom,
                center: coords,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                scaleControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.DEFAULT
                },
                overviewMapControl: true,    
            };
            
            var map = new google.maps.Map(element[0], options);
            
            var icon = { 
                url: settings.icon_url, 
                origin: new google.maps.Point(0, 0)
            };

            var marker = new google.maps.Marker({
                position: coords,
                map: map,
                icon: icon,
                draggable: false
            });
            
            var info = new google.maps.InfoWindow({
                content: settings.text
            });

            google.maps.event.addListener(marker, 'click', function() { 
                info.open(map, marker);
            });

            var styles = [{
                    featureType: "all",
                    stylers: [
                      { saturation: -80 }
                    ]
                },{
                    featureType: "road",
                    elementType: "geometry",
                    stylers: [
                      { hue: "#00ffee" },
                      { saturation: 50 }
                    ]
                }, {
                    featureType: 'poi.school',
                    elementType: 'geometry',
                    stylers: [
                        { hue: '#4f2a0b' },
                        { lightness: -15 },
                        { saturation: 99 }
                    ]
                }, {
                    featureType: 'poi.park',
                    elementType: 'geometry',
                    stylers: [
                        { hue: '#a3e36b' },
                        { lightness: -15 },
                        { saturation: 99 }
                    ]
                }, {
                    featureType: 'poi.park',
                    elementType: 'labels.icon',
                    stylers: [
                        { hue: '#450b4f' },
                        { lightness: -15 },
                        { saturation: 99 }
                    ]
                }
            ];

            map.setOptions({styles: styles});
        });
 
    };
}( jQuery ));