Showing the company HQ with a custom overlay

In this task we'll put the company HQ on the map, literally, by adding a custom marker complete with an overlay that provides some basic information about the company, and perhaps an image of the premises.

Prepare for Lift Off

In this task we'll cover the following subtasks:

• Adding a marker to the map

• Adding a hidden element containing information about the company

• Adding a custom overlay to display the company information when the new marker is clicked

• Adding a click handler to show the overlay when the marker is clicked

Engage Thrusters

Adding a custom marker to the map can be achieved with the following simple code block, which should be added directly after the variables we added in the previous task:

var homeMarker = new api.Marker({
    position: mapCenter,
    map: map,
    icon: "img/hq.png"
});

To create an information overlay, or info window to use the correct Google terminology, for our new marker, we should first add an HTML element that contains...