Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
19th November 2012

Customise and personalise Google Maps

Google Maps is the de facto standard for online maps. Here we look at how to customise the Google API to match your brand and site

Customise and personalise Google Maps

Cartography, the process of making and studying maps, has been around for millennia. It is a subtle combination of art, aesthetics, science, and design, and a process that allows us to chart, record and share data in an easy to read format.
From the earliest cave paintings depicting social gatherings and small communities, to larger, more detailed cartographic creations of the stars in the sky and the evolving shape of the Earth as was perceived throughout history, even to the humble London A-Z possibly lost in the back of a glove box in a car; the art of map making and reading is one that is still very much alive and of importance to us today.
Although there are a number of mapping services available online, Google Maps seems to have surfaced as the top selection due to it’s ease of use, clear layout and aesthetic design. Readability is of crucial importance – we want to consume data and information easily, so it needs to be incredibly simple to digest and understand. The Google Maps interface is clean, concise and relatively clutter-free, and the rendered maps are instantly recognisable and simple to process. Perhaps the familiar feel and design of the information provides some comfort to its many users and implementers?
As a web professional, one of the service’s greatest features is the fact that through an incredibly detailed and extensive API, it is available to use on our own sites, applications and web projects in almost any way we see fit. We can create a truly customised experience for our users with a tool that many use and feel safe with.
From CMS plug-ins to bespoke implementations, Google Maps is used throughout the World Wide Web, and only your imagination can stop you creating some unique applications using the openly available service.

Starting Off

To start off, let’s answer one simple question first: How easy is it to implement a Google Maps interface into my existing website?
Chances are most if not all of us have been to the main Google Maps page (maps.google.com) at some point in our lives – whether it was to check directions between a number of locations, find points of interest in specific geographical areas, or to explore the world with the Street View features and see if you could spot weird and wondrous moments of public life captured by the roving Google team.
With all of the exciting things to experience and explore using the service, you may or may not have noticed the existence of a ‘Link’ button to the left hand side of the map (represented by a graphic of a small chain link). It can easily be overlooked with so much information to look at and take in, but it holds the key to quickly and easily adding the Google Maps features to your websites.
Clicking on the Link button, the user will then be presented with a small overlay window, which will provide you with a direct link or iFrame HTML code to the exact location currently visible in the larger mapping window directly beneath the overlay. The link is ideal for sharing a saved location with anyone over IM, in an email or anywhere else. The generated HTML consists of an iFrame with default width, height and other style attributes, which will open up the same link to the currently visible map location. This in itself provides the answer to our initial question of ease of use and implementation – you can simply copy and paste the provided HTML code into your web application and, barring any specific styles you may wish to add for positioning and aesthetics to fit into your site, you now have a Google Maps feature.
We can actually take this a little further and customise the map somewhat to add some basic individuality to the iFrame markup. Directly below the HTML text field, you will see a link to ‘Customize and preview embedded map’. Clicking this, a new window will appear to allow you to tweak the dimensions of the map. You can choose from three predefined sizes (small, medium and large accordingly), or opt to enter a custom size, which will allow you to enter specific width and height dimensions. Any changes made in this window will update the map to provide you with an instant preview of how it will look. The updated HTML code is available to copy and paste into your website, if and when you are happy with your changes.
So, just how easy can it be? Essentially, you are no more than a few quick clicks away from obtaining the basic code you need to include a Google Maps location on your site.

Doing It Yourself

One of the greatest features of Google Maps as a product is the API (Application Programming Interface), which provides developers and web professionals with the ability to create truly custom mapping applications and interfaces.
When starting with the API, you literally start with a blank canvas. Once you include any reference to the Google Maps API JavaScript file or URL endpoint within your HTML document, you have the freedom to create a map of any size and scale, and display a level of information that is right for you and your needs.

Get Some Style

The Google Maps interface is instantly recognisable: the clear layout, the icons used to set a marker to any locations, the distinctive default colour palette. All of these things and many more act as confirmation at a glance that you are using a Google Maps map.
While this is reassuring to some extent, heavy importance lies on being able to differentiate your brand, your site, or your application’s use of mapping interfaces from everyone else who uses the popular API. Familiarity is good, but creatively we strive to stand out from those around us.
One of the new features available in the latest API is Styled Maps. With a little extra code added to your map initialisation code, you can customise the base map layers to match your brand requirements, draw attention to your plotted data or markers, or to simply remove any features of the map you do not want to show.
The possibilities for customisation using styles are numerous, but a distinctly visible change you can make is to alter the colour scheme of the map and its various elements. This does not need to stop at changing the road featureType colours to bright pink or blue – in fact, the Google Maps API has many sub-categories for each individual featureType, all of which can have specific styles applied to them, or removed from display altogether. The choice is yours.

Customise and personalise Google Maps

Street View

Viewing geographic data using the mapping interface is one thing, but truly being able to ‘step into the map’ provides another user experience altogether, and one that can be used to great effect to help create something memorable for your site’s users.Not only does the Street View functionality allow you to dive in and tread the cities, towns and hamlets in a 360 degree panoramic view of all areas covered by the Google Maps application, you can also set specific options to tailor and customise your real-world map views to your liking.
We have the ability to intercept and monitor Street View events if any changes are made to the state of the panorama. These can include detecting if the Street View is switched off or on, or if the geographical location of the panorama changes as the user continues on their virtual journey within your application.

001 google.maps.event.addListener(panorama,
002 ‘position_changed’, function() {
003 console.log(‘the position has changed.
004 do something amazing here’);
005 });

Typically, location markers are used in the standard map interface to easily plot and visualise locations. These can also be used in Street View as the native display of map overlays is also supported in panoramic views. This could be used to set clear pointers for public transport, favourite venues or clearly identifiable locations for a chain of shops, for example, that will persist on the map stage if a user switches their view from the default map type into Street View.

Customise and personalise Google Maps

Routing

A map is a map, and one of its core purposes is to assist the inquisitive, the lost or those wishing to plan journeys.
If you are including a Google Maps interface within your application, displaying your location to a user is very helpful. You can improve your user’s experience and help them to find you and your services by giving them the ability to use your map to generate routing and directions from their specific location to your offices, shops, business or favourite coffee place.
The Google Maps API can really help you transform your standard mapping interface into something that can be used to generate and return directions and routing options.
Obtaining a request for directions from point A to point B is relatively simple.

001 var directionsService = new google.maps.
002 DirectionsService();
003 var directionsDisplay = new google.maps.
004 DirectionsRenderer();
005 var request = {
006 origin: “St Albans, UK”,
007 destination: “Cambridge, UK”,
008 waypoints: [
009 {
010 location:”St. Ives, Cambridgeshire,UK”,
011 stopover:false
012 }
013 ],
014 provideRouteAlternatives: false,
015 travelMode: TravelMode.DRIVING,
016 unitSystem: UnitSystem.IMPERIAL
017 };
018 directionsService.route(request,
019 function(result, status) {
020 if (status == Google.maps.DirectionsStatus.OK){
021 directionsDisplay.setDirections(result);
022 }
023 });

In the previous code sample, we set a new request object containing our origin and destination locations, including a single waypoint for the journey. We also set the mode of travel and were able to define the system of units used to calculate the distance.

Customise and personalise Google Maps

When a direction request is made, an asynchronous call is made to the API and the results from the request are passed into the callback function in the form of a DirectionsResult object and a DirectionStatus response code. The information returned in the DirectionsResult object allow us to available, but also the display of any returned textual directions as a step-by-step series of directions.
We can further extend the interaction for the user by allowing them to modify their route by setting an option to make it draggable. When this has been implemented, the user can select any point on the rendered result and move it to a new location. This will dynamically update the map routing to display the altered path.
We can also make use of the Distance Matrix service to compute the travel distance and journey duration between supplied locations. Using this feature in conjunction with the routing requests will add an extra level of interaction for the user and help create a viable route-planning tool.

Finally…

The Google Maps API provides a lot of in-depth functionality that can help you create a customised mapping tool or interface for your users. You can choose which (if any) of the customisation features you want to include to generate an implementation of the familiar map user interface, and to build something specific to your needs and requirements. However you choose to use it, take some time to investigate the available features and new updates, and explore the possibilities to help make your map stand out from the rest.

USING THE DISTANCE MATRIX

Provide additional routing information to users such as estimated journey times
The Google Map API contains the Distance Matrix service, which can be used to compute travel distance and journey times between multiple routes using a given mode of travel. This works beautifully in conjunction with the Directions Service (which returns detailed route information), as well as standing up effectively on it’s own.
Accessing the service is relatively straight forward, as we can see here:

001 var origin = new google.maps. LatLng(51.75153, -0.333892);
002 var destination = “London, England”;
003 var service = new google.maps.
004 DistanceMatrixService();
005 service.getDistanceMatrix(
006 {
007 origins: [origin],
008 destinations: [destination],
009 travelMode: google.maps.TravelMode. DRIVING,
010 avoidHighways: true
011 }, callback);
012 function callback(response, status) {
013 // Process the response here
014 }

Once the Distance Matrix service is instantiated, we pass the specific routing information into a particular method, getDistanceMatrix(). This contains at least one origin and one distance, although multiple values can be sent through. It’s useful to note you can send in these details as a specific Google Map co-ordinate object or as a textual reference to a location. Finally, we specify a callback method to process the returned response, within which we can calculate the duration and distance of our suggested route.

STYLING YOUR MAP

Make use of the new features in the API to change the colour scheme and display to suit your brand

001 var myOptions = {
002 center: new google.maps.LatLng(0,0),
003 zoom: 2,
004 mapTypeId: google.maps.MapTypeId.ROADMAP
005 };
006 var map = new google.maps.Map(
007 document.getElementById(“map_canvas”),
008 myOptions
009 );

Initialise Map
Here we create a custom set of options for use in the initial view of the map, setting a specific zoom level, map type and central location. We build and initialise our Google Map implementation, and pass in the options defined previously. The map will be displayed in the map_canvas div element.

001 var myStyles = [
002 {
003 featureType: “all”,
004 stylers: [
005 { visibility: ‘off’ }
006 ]
007 },
008 {
009 featureType: “road”, 010 stylers: [
011 { hue: “#ff0023” },
012 { saturation: 40 },
013 { visibility: ‘on’ }
014 ]
015 }
016 ];

Create styles
Next we start to create any custom styles we wish to include in the map. This is a simple JavaScript array that contains separate objects for each style we wish to apply to the final layout. Here, we turn off all features by default, and reintroduce all roads with an altered colour style.

001 map.setOptions({styles: myStyles});

Apply styles
Finally, we need to apply our custom styles to our predefined map interface. This could be done during the map construction, but in this example we are going to pass our style array object and use the setOptions method to apply these updates directly to our map.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.eukhost.com eUKhost

      Google Maps has many measures and because of its features it deploys quality and required results.

    • mina

      google maps are great..

    • Pingback: Customise and personalise Google Maps | MOKMEDIA - Web Design Blog

    • 3d crystals

      certainly like your web site but you need to test the spelling on quite a few of your posts.
      Many of them are rife with spelling problems and I in finding it very troublesome to tell
      the truth on the other hand I will certainly
      come back again.