Customizing Google Maps for Your Projects

There are many types of applications that require some kind of map to aid functionality, like fitness apps, route distance calculation apps, apps which offer you a trip plan, and even airplane or bus ticket-buying apps. Here's how you can use Google's Map API to build and customize your own map.

The source code for this application is available on GitHub. It is an express application.

Starting the App

Here's how to start the application:

user@machine:~/ git clone https://github.com/gergob/GMaps.git
user@machine:~/ cd GMaps
user@machine:~/GMaps/ npm install
user@machine:~/GMaps/ ./bin/www

Once you've started the application, you should see something like this:

Creating a New Map

There are two ways to create a new map. The first option is the asynchronous way. In the code, you can see that the script (loaded in an async way) specifies the name of the callback function which should be executed once the download of the API JavaScript files has finished. In the layout.jade file you'll see the following code:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='https://maps.googleapis.com/maps/api/js?key=YOUR_OWN_API_KEY&callback=initializeMap', async, defer)
  body
    block content

Here you can see that the API requires a user specific KEY in order to work(key = YOUR_OWN_API_KEY). This key can be created on the https://console.developers.google.com website.

A good practice is to create a new Google account for your client and generate the API KEY using that account, because each KEY has a daily quota. Please inform your client about these quotas and also the additional costs which may arise in case this quota is regularly missed. All this information can be found on Google's MAP API website.

The other important part in the code is the callback=initializeMap part. Here you specify the name of the callback function to be invoked by the map API once all the JavaScript files have been downloaded. The initializeMap function:

function initializeMap() {
    var myMapElement = document.getElementById('mymap');
    if(myMapElement && google && google.maps && typeof(google.maps.Map) === 'function') {
        var map = new google.maps.Map(myMapElement, {
            center: {lat: 43.3214, lng: 0.56},
            zoom: 6
        });
    }
}

You need to find the div element which will hold the map. Once it's found and Google's Map API is available you can create a new Map using your div element and after specifying the Map options. In this example, the center of the map is specified using Latitude and Longitude coordinates. The zoom option can have values between 0.7 and 18 and the bigger the value zooms the view, and shows more details.

 

The second option for creating new Maps is the non async way (synchronous). This is a traditional JavaScript approach, where the script tag that loads the map API has to be added before the script tag which uses the API.

The asynchronous way is better because it does not block the execution of other scripts on the webpage till all the Map API JavaScript files are loaded.

Map Types

Google's Map API has four types of Maps (roadmap, satellite, terrain and hybrid). The roadmap is the default map type. The satellite shows images from Google's satellite pictures. The terrain offers geographical and physical information about the region and the hybrid map mixes satellite and roadmap details.

To change the map type all you need to do is update the map options mapTypeId property with one of these values: google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.ROADMAP.

Here's the code for the Satellite map on the above image:

    //
    // Satellite Map
    //
    var satelliteMapElement = document.getElementById('satelliteMap');
    var satelliteMap = new google.maps.Map(satelliteMapElement, {
        center: {lat: 42, lng: 0.3},
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });

Markers and Information windows

When showing maps, a point of interest is usually marked, or some additional information needs to be shown.

Google's Map API supports adding Markers to the map and showing information windows.

You can see a marker below:

Markers can be created from code, but these are only displayed if they are assigned to a map.

   var position = {lat: 43.2678, lng: -2};
    //
    // Map with Marker
    //
    var mapWithMarkerElement = document.getElementById('mapWithMarker');
    var mapWithMarker = new google.maps.Map(mapWithMarkerElement, {
        center: position,
        zoom: 6
    });

    var marker = new google.maps.Marker({
        position: position,
        map: mapWithMarker,
        title: 'San Sebastian'
    });

If the map property is not assigned when creating the marker, this can be done later using the setMap() method. Markers can be removed from maps by setting their map property to null with the same setMap() method.

Information windows will be displayed once the markers are clicked:

First you need to create the InfoWindow object then you need to subscribe to the click event of the marker and when that fires you can show the InfoWindow:

var infowindow = new google.maps.InfoWindow({
    content: 'Here is the beautiful city of <strong>San Sebastian</strong>'
});
marker.addListener('click', function() {
    infowindow.open(mapWithMarker, marker);
});

The InfoWindow object has a content property. This can contain HTML code or custom styling using CSS.

Greg Bogdan
Greg Bogdan Hire Me

Software Engineer, Blogger, Tech Enthusiast

I am a Software Engineer with over 7 years of experience in different domains(ERP, Financial Products and Alerting Systems). My main expertise is .NET, Java, Python and JavaScript. I like technical writing and have good experience in creating tutorials and how to technical articles. I am passionate about technology and I love what I do and I always intend to 100% fulfill the project which I am ...

Hire Me

Next Article

Contextual Marketing for Beginners