How to Add Branded Branch Locations to Google Maps ~ KrobKnea

Final product image — What You'll Be Creating

The Plan

In this tutorial we'll walk through the process of creating a branded Google map for an imaginary client. Our map will include three key features:

Custom markers at each of the client's branch locations
The client's logo in a fixed position on the map
Map theming which compliments the client's branding

In this case, our imaginary client is going to be "The Hobby Shoppe", purveyors of fine board games and other hobby paraphernalia around the city of Melbourne, Australia.

Creating the Base Map

We'll get the ball rolling by creating a basic map centered on the city of Melbourne. After we add our branch markers we'll refine the center position of the map, but for now we'll start by finding the right latitude and longitude in order to show the city as a whole.

Initial Latitude and Longitude

To do this go to Google Maps and search for Melbourne, then zoom in just a little so you're not including unpopulated areas. As you adjust the position of the map you'll notice the URL changes to reflect your new latitude, longitude and zoom level. When you have the map positioned where you like, copy the URL somewhere for later reference, e.g:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627...
After the @ symbol in the URL you'll see comma separated values for the latitude, longitude and zoom level: -37.8046274,144.972156,12z
The first value -37.8046274 is the latitude, the second value 144.972156 is the longitude, and the 12z value means the zoom level is set to 12. We're now going to plug these values into a basic map.

Basic Markup

Create a blank HTML document and add the following code:

<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

      html { height: 100% }

      body { height: 100%; margin: 0; padding: 0 }

      .wrap { max-width: 75em; min-height: 40em; height:100%; width:100%; margin: 0 auto; padding-top: 2.5%;}

      #map-canvas { height: 90%; }

    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true">

    </script>

    <script type="text/javascript">

      var map;

      var centerPos = new google.maps.LatLng(-37.8046274,144.972156);

      var zoomLevel = 12;

      function initialize() {

        var mapOptions = {

          center: centerPos,

          zoom: zoomLevel

        };

        map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );

      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

  <div class="wrap">

    <div id="map-canvas"></div>

  </div>

  </body>

</html>

With this markup we have created an HTML document including a div with the id map-canvas which will hold our map. We've also added some basic CSS to size and position the map-canvas div.
Lastly, we've loaded the required script from the Google Map API with:

1	`<script` `type="text/javascript"` `src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>`

and we've created a JavaScript function to set the basic options of the map and load it into our empty div.

<script type="text/javascript">

  var map;

  var centerPos = new google.maps.LatLng(-37.8046274,144.972156);

  var zoomLevel = 12;

  function initialize() {

    var mapOptions = {

      center: centerPos,

      zoom: zoomLevel

    };

    map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );

  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>

Note: see how the values we took from the Google Maps URL earlier have been used in the centerPos and zoomLevel variables, which are in turn used in the mapOptions array. The centerPos variable uses the comma separated latitude and longitude values of -37.8046274,144.972156, and the zoomLevel variable uses the value of 12.
Save your HTML file and open it up in any browser. Your base map should look a bit like this:

Adding Branch Location Markers

The next step is to find the latitude and longitude for each of the client's branch locations, so we can create markers for them at those positions. The easiest way to do this is to find each branch address via a Google Maps search and grab the latitude and longitude from there.

Find Latitude and Longitude of Each Branch

Head back to Google Maps again and run a search for each branch location. Assuming the client has given you the addresses of each location, you can simply search for that address and a marker will appear on the map. Right click that marker and choose What's here? from the context menu.

A small popup will appear at the top left of the map displaying details for this marker including latitude and longitude:

Add Locations to the Initialize Function

Make a note of the latitude and longitude for each of the branch locations you want to add to your map. In the case of "The Hobby Shoppe" we have seven branch locations and we'll add markers for each by inserting the following code just before the end of our map's initialize() function, after the map = new google.maps.Map... line:

var locations = [

  ['First Shoppe', -37.808204, 144.855579],

  ['Second Shoppe', -37.675648, 145.026125],

  ['Third Shoppe', -37.816935, 144.966877],

  ['Fourth Shoppe', -37.818714, 145.036494],

  ['Fifth Shoppe', -37.793834, 144.987018],

  ['Sixth Shoppe', -37.737116, 144.998581],

  ['Seventh Shoppe', -37.765528, 144.922624]

];

for (i = 0; i < locations.length; i++) {  

  marker = new google.maps.Marker({

    position: new google.maps.LatLng(locations[i][1], locations[i][2]),

    title: locations[i][0],

    map: map

  });

}

In this code we are first creating an array of branch locations with the name, latitude and longitude of each. We're then iterating through that array to add each location as a marker to the map, with the title to be displayed as a tool tip if the marker is hovered over.
Your map should now have markers added like so:

But wait, there's something wrong with this picture. We added seven locations, and yet only six markers appear. Why?
It's simply because our seventh marker is just out of view based on the initial latitude and longitude we set for the map, so we need to refine that center position.

Adjusting the Map Center Position

Now that we have all our markers in place we can refine the starting position of the map to ensure they're all visible on load. To do that we'll add a button which we can click to give us new co-ordinates once we find the perfect map starting position.
Add this button code to your page, anywhere in the body section:

<button onclick="console.log( 'Lat &amp; Long: ' + map.getCenter().k + ',' + map.getCenter().A + ' Zoom: ' + map.getZoom() );">Get Map Co-ords</button>

Now you can move your map around and then click the new Get Map Co-ords button when you find the right spot.

The latitude, longitude and zoom level of your position will be written to your console, so make sure you have the Chrome Dev Tools or Firebug console open.
Update your map's center option with the new latitude and longitude, as well as the zoom option if that has changed too:

var mapOptions = {

  center: new google.maps.LatLng(-37.74723337588968,144.961341333252),

  zoom: 12

};

Save and refresh your map and now all seven map markers should be visible. When you're happy with the refined center position you can remove the Get Map Co-ords button code.

Adding Custom Marker Images

Now that we have all the markers in place and visible for the branch locations we're going to convert them into a custom image, one that goes with the client branding and the style of map. Any image created for use as a map marker should have a transparent background, e.g.

Place your custom marker in an "images" folder, relative to the folder your base map is in, then add the following variable directly under the locations variable you created previously:

var image = 'images/shoppe_icon.png';

Then add an extra option of icon: image to the for loop we created earlier to place map markers. Passing this variable into the map marker generation options specifies that you want the marker icons to be replaced with your custom image:

for (i = 0; i < locations.length; i++) {  

  marker = new google.maps.Marker({

    position: new google.maps.LatLng(locations[i][1], locations[i][2]),

    title: locations[i][0],

    map: map,

    icon: image

  });

}

Take another look at your map and you should now see little houses at each of the seven branch locations:

Adding the Client's Logo

We're now going to add the client's logo in such a way that it will remain the same size and in the same position regardless of where the map is zoomed or panned to.
The only elements of a Google Map that don't move with panning and zooming are the control UI elements, typically used for things like engaging street view or switching map types. However, we can use the custom control API equally well to place a logo on the screen. We'll also have our new custom control reset the zoom and center position of the map when clicked so as well as displaying the logo it performs a useful UI function.
Start by adding your client's logo image into the same "images" folder you placed your custom marker image. Then add the following JavaScript function just before your existing initialize() function:

function LogoControl(controlDiv, map) {

  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('div');

  controlUI.style.backgroundImage = 'url(images/logo.png)';

  controlUI.style.width = '600px';

  controlUI.style.height = '116px';

  controlUI.style.cursor = 'pointer';

  controlUI.title = 'Click to set the map to Home';

  controlDiv.appendChild(controlUI);

  google.maps.event.addDomListener(controlUI, 'click', function() {

    map.setCenter(centerPos)

    map.setZoom(zoomLevel)

  });

}

When executed, this function will create a control UI element 600px by 116px in size, using the logo image as its background. It will also create a listener which will reset the center and zoom of the map if the logo is clicked.
Then, at the end of your initialize() function, insert the following code:

var logoControlDiv = document.createElement('div');

var logoControl = new LogoControl(logoControlDiv, map);

logoControlDiv.index = 1;

map.controls[google.maps.ControlPosition.TOP_CENTER].push(logoControlDiv);

When the initialize() function runs it will now call the LogoControl() function we just created and add its output into the map controls.
Your map should now look like this:

Coloring the Map

To setup the colors of your map you'll almost certainly want to use Google's Styled Map Wizard in order to get rapid visual feedback on your choices.

The Feature type menu in the wizard gives you a range of map components available for styling. They're organized from the most general, down to most specific. At the most general level you can apply color choices to the All feature type, in order to affect everything on the map equally. On the other end of the spectrum you can drill down as specifically as All > Transit > Station > Bus for example.
With a Feature type selected you can then also make a selection from the Element type menu to determine if you want your color choices to influence the feature's geometry or its labels (such as the little text labels you see floating around the map). Furthermore, you can then also select either the fill or stroke color to modify.
When it comes to choosing colors there are two main areas you'll want to work with; the Colour panel and the Hue panel. The Colour panel will apply a color hexcode flatly to the features and elements you have selected, whereas the Hue panel will tint your selection with a range of lightness and darkness influenced by each element's original color.
As a general rule you should start by applying a Hue to the most general levels of your map so you have some uniformity in your color scheme - you could compare this to a base coat of paint. From there you can then drill down to "paint" over the top with flat Colour settings for more specific features and elements.

Our Map

Start by searching in the wizard for "Melbourne" and then positioning the preview map to show you approximately the same area you set your own map to show.
Under the Feature type menu in the wizard select All, and under the Element type menu select Geometry. Then check the Hue box and click the color bar until you get a value of somewhere around #ffa200. For some reason you can't directly enter a value in this field, so you have to get it as close as you can by clicking. Then check the Invert lightness box, activate the Saturation setting and drag it to 35, activate the Lightness setting and place it at 50, and activate the Gamma setting and get it as close as you can to 1.3.
These settings should have tinted your entire map like so:

Your map looks a little funny at this stage because we're aiming to make a colorful map, so the tint settings here have been amped up to ensure there are no drab areas anywhere. The excessively bright areas will be overridden with more subdued colors in subsequent steps.

Toning Things Down

Now that you have your first style applied, click the Add button in the top right corner of the Map Style panel, (located at the right side of the map wizard). Clicking this button creates a second style named "Style 1" under which you can select different elements and apply new styles.
With "Style 1" selected in the Map Style panel and All still selected under Feature type click the Labels option in the second list of the Element type menu. Check the Hue box and again set it to a value of #ffa200 so your labels are all tinted instead of being bright blue or green as you see in the image above.
Click the Add button on the Map Style panel to create another new style, then click Water in the second list of the Feature type menu. Under the Element type menu select Geometry. Check the Color box and enter a color hexcode of #8F9B98.

The Remaining Styles

You should now know how to create new styles, by selecting Feature type and Element type menu items. Go ahead and add the rest of these styles one at a time in the styled map wizard:

Feature type: All
Element type: All > Labels > Text > Fill
Color: #f8ead0

Feature type: All
Element type: All > Labels > Text > Stroke
Color: #6a5035

Feature type: All > Landscape > Man made
Element type: All > Geometry
Color: #9f8053

Feature type: All > Landscape > Natural
Element type: All > Geometry
Color: #9c9743

Feature type: All > Point of interest
Element type: All > Geometry
Color: #ACA74C

Feature type: All > Road
Element type: All > Geometry > Fill
Color: #d3b681

Feature type: All > Road
Element type: All > Geometry > Stroke
Color: #644F34

Feature type: All > Road > Arterial
Element type: All > Geometry > Fill
Color: #c6a15e

Feature type: All > Road > Local
Element type: All > Geometry > Fill
Color: #b09061

Feature type: All
Element type: All > Labels > Text > Stroke
Color: #483521

Feature type: All > Transit > Line
Element type: All > Geometry
Color: #876b48

Feature type: All > Transit > Station
Element type: All > Geometry
Color: #a58557

Exporting Map Styles

Once you've added all these styles you're ready to export the settings the wizard has created and add them into your map. On the Map Style panel click the Show JSON button at the bottom. You'll see a white window appear, displaying an array of JavaScript options.
Copy all the text from that window between the opening [ and closing ], i.e. everything but the main heading.
At the beginning of your initialize() function add this new line:

var styles = ;

Position your cursor before the ; then paste in the code you copied from the styled map wizard. You should end up with:

var styles = [

  {

    "elementType": "geometry",

    "stylers": [

      { "hue": "#ffa200" },

      { "invert_lightness": true },

      { "lightness": 50 },

      { "saturation": 35 },

      { "gamma": 1.31 }

    ]

  },{

    "elementType": "labels",

    "stylers": [

      { "hue": "#ffa200" }

    ]

  },{

    "featureType": "water",

    "elementType": "geometry",

    "stylers": [

      { "color": "#8F9B98" }

    ]

  },{

    "elementType": "labels.text.fill",

    "stylers": [

      { "color": "#f8ead0" }

    ]

  },{

    "elementType": "labels.text.stroke",

    "stylers": [

      { "color": "#6a5035" }

    ]

  },{

    "featureType": "landscape.natural",

    "elementType": "geometry",

    "stylers": [

      { "color": "#9c9743" }

    ]

  },{

    "featureType": "landscape.man_made",

    "elementType": "geometry",

    "stylers": [

      { "color": "#9f8053" }

    ]

  },{

    "featureType": "poi",

    "elementType": "geometry",

    "stylers": [

      { "color": "#ACA74C" }

    ]

  },{

    "featureType": "road",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#d3b681" }

    ]

  },{

    "featureType": "road",

    "elementType": "geometry.stroke",

    "stylers": [

      { "color": "#644F34" }

    ]

  },{

    "featureType": "road.arterial",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#c6a15e" }

    ]

  },{

    "featureType": "road.local",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#b09061" }

    ]

  },{

    "featureType": "transit.line",

    "elementType": "geometry",

    "stylers": [

      { "color": "#876b48" }

    ]

  },{

    "featureType": "transit.station",

    "elementType": "geometry",

    "stylers": [

      { "color": "#a58557" }

    ]

  }

];

Then at the very end of the initialize() function add these three lines:

var styledMap = new google.maps.StyledMapType( styles, {name: "Styled Map"} );

map.mapTypes.set('map_style', styledMap);

map.setMapTypeId('map_style');

These lines of code apply all the color scheme data you just pulled in from the styled map wizard to your map. Take another look and it should now appear with all your styling selections in place:

Check out the live demo so you can see the map at its proper size and play around with zooming and panning here.

Wrapping Up

As a final touch you might also like to add a frame effect around your map to further compliment the styling. Replace the existing #map-canvas { ... } CSS in your file with this:

#map-canvas { 

  height: 90%;

  border: 5px solid #33210f;

  -moz-box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;

  -webkit-box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;

  box-shadow: 0 3px 3px 3px rgba(0,0,0,0.9), 0 0 0 3px #000;

}

As you can see, there's quite a lot you can do with Google Maps beyond just basic embedding. In this tutorial we've still only explored a couple of aspects of the Google Maps API - you can read more about all the other functions offered by the API in the Google Map help docs.
If you want to take this tutorial even further you could also try adding your own custom styled zoom and pan controls (custom control docs), and creating info windows which pop up when markers are clicked . These popups could hold details like phone number and street address (info windows docs).
Give these techniques a try next time a client asks you to include a Google Map in their site. You might just get a bonus!

KrobKnea