Adding markers and events

It's great that we have a map on our screen (assuming that you have followed the last recipe Building a Google map), but what about connecting data and integrating it into our map. I'm glad you asked about that, as this recipe will be our first step into adding data in the form of markers and events.

In this sample, our goal is to place four markers in New York City. When the markers are clicked, we will zoom into that area and switch the map view type.

Getting ready

At this stage, you should have created (at least once) a Google map by using the JS API; if you haven't, please revert back to the Building a Google map recipe.

How to do it...

We are not making any further changes in the HTML page created in the last recipe Building a Google map; as such we will focus our attention on the JavaScript file:

1. Create an init function:

   function init(){
   //all the rest of logic in here
   }

2. Create map constants in the base state and then zoom in on the state:

   function init() {
     var BASE_CENTER...