Adding your own logo as a control

The Google Maps JavaScript API has designed the addition of custom controls in a very flexible manner so that you can have a variable type of HTML elements in one HTML div element.

Adding your own logo of choice, such as adding your company's logo on top of the map UI in your own application, is a good sign for customization and shows off your work.

In this recipe, we will show a logo as a control in the map UI using the Google Maps JavaScript API.

Getting ready

This recipe will make use of the very first recipe of Chapter 1, Google Maps JavaScript API Basics, as we only need the basics to develop this recipe.

How to do it…

The following are the steps to display a logo as a custom control in the Google Maps UI:

1. After creating the map object in the initMap() function, create the container div element:

   var logoDiv = document.createElement("div");

2. Then, create the HTML img element that contains your logo of preference:

   var logoPic = document.createElement("img");
   logoPic...