Customization of a Google Map

In this tutorial we’ll look into the customization of a Google Map. This is a follow-up of a previous tutorial in which we created a Contact Page with a Google Map.

Customization of a Google Map

In this tutorial we’ll examine different ways to customize a Google Map:

  • Setting optional Map Options
  • Adding a Custom Marker
  • Adding and styling an Infowindow
  • Adding and styling an Infobox
  • Creating a different style for a Google Map

Map Options

In the previous tutorial about adding a Google Map we already used a script with Map Options. But we only used the required options. Besides those required options (center, zoom) we can also set the value of several other options. Most of these optional map options are set with Boolean values (true/false). In the example below I have changed the default value (‘true’) of several options to ‘false’.

You will have noticed (line 4) that we can also set the type of map. You can choose the options: ROADMAP (normal), SATELLITE (photographic map), HYBRID (photographic map + roads and city names) and TERRAIN (map with mountains, rivers, etc.).

  • The MapType control lets the user toggle between map types (such as ROADMAP and SATELLITE). This control appears by default in the top right corner of the map.
  • The Pan control displays buttons for panning the map. This control appears by default in the top left corner of the map on non-touch devices. The Pan control also allows you to rotate 45° imagery, if available.
  • The Rotate control contains a small circular icon which allows you to rotate maps containing oblique imagery. This control appears by default in the top left corner of the map. (See 45° Imagery for more information.)
  • The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View. This control appears by default in the top left corner of the map.

Use this link if you want to know more about Map Options.

A Custom Marker

Instead of the standard marker we can also use a custom marker. In the demo you can see that I replaced the standard marker with a blue pin (Medialoot Location Pins):
DEMO - Custom Marker

To use a custom marker we first have to create a variable that will hold the location of the image we want to use as the marker (line 11).

We can then define the icon with that variable (line 15).

And the last step is that we invoke our marker (line 21). Make sure that you use the same name (here ‘marker’) as that of the variable you used earlier to create a new marker (line 12).

Use this link if you want to know more about Markers.

Adding and styling an Infowindow

An Infowindow is a kind of text balloon. It will provide information about the location on the map. The Infowindow will either display after a user clicks on the marker or it will display when opening the map (replacing the marker):
DEMO - Infowindow with marker

To create an Infowindow we first need to insert the content. Start by creating a variable (line 15) with a name for the content (in this tutorial ‘contentString’). This variable will hold a div with an ID (lines 16 and 22). Inside that div you have to insert the actual content you want to display (lines 17–21 show an example).

You then need to create a new Infowindow that will hold the content (lines 24-26).

You can set a maximum width for the Infowindow (line 32) as part of the definition of the marker.

To have the Infowindow display after clicking on the marker you need to bind the opening of the Infowindow to the click event (lines 35-37).

An Infowindow without a Marker

You do not need a marker if you want to use an Infowindow. The Infowindow can also replace the marker (and display directly after opening the map):
DEMO - Infowindow without a marker

Styling an Infowindow

You can style an Infowindow. In the demo above you can see that I have changed the color of the text. To achieve this I added the style rule #infowindow_content {color: green} to the style section of the page. But you have to realize that your options to style the Infowindow this way are limited. You can only change the styling of the content and not that of the Infowindow itself.

Use this link if you want to know more about Infowindows.

If styling the ‘Infowindow’ is important for you then you’re better of by using an Infobox.

Infobox

With the Infobox script infobox.js you can style both the content and the box (see the demo below for an example):
DEMO - Infobox

The infobox.js plugin is loaded (see line 43) just after the Google Map script.

We set the properties of the Infobox in lines 65-78:

  • To insert the content in the Infobox we use the property content (see line 66).
  • To style the Infobox the easiest method is to use the property boxClass (see line 71). We can then simply use CSS rules (see the style section: lines 18-29) with this selector.
  • An explanation of the other properties used (such as ‘disableAutopan’ and ‘closeBoxURL’) can be found with this link about Infobox’s properties, methods, etc..

The script above is derived from an example provided by the developers of the Infobox. Notice that they used a slightly different approach to invoke the function (‘initialize’): the function is invoked with the instruction onload="initialize()" in the opening body tag.

Custom style for a Google Map

You can also create a custom style for a Google Map (see the flat example below)

To create a custom styled map you need to use the Styles Map Option:

In the example above I have turned of the display of local roads on the map. Points of interest are also no longer displayed, with the exception of Tourist Attractions, Places of Worship and Parks.
DEMO - Map without local roads but with a selection of POI's

There are several tools that you can use to create a custom style for a map:

Snazzy Maps provides a repository of custom color schemes for Google Maps aimed towards web designers and developers. The flat style I used for the first demo in this paragraph is one of those custom styles you can find on Snazzy Maps.

1 comment

gilberto - December 21, 2016 Reply

It was very helpful to me, thanks for sharing this. God bless you

Add your comment

Related Posts