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.
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
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...