To control the size of the InfoWindow, you can add an HTML element with a specific class attribute as its content. This way, you can control its size in your CSS.
Here’s the JavaScript:
var infowindow = new google.maps.InfoWindow({
content:'<div class="info">Hello world</div>' });
Here’s the CSS:
.info {
width: 250px;
}
A Word or Two About Events
Every time you interact with something on a web page, an event is triggered. For example, when you click a link, a click event is triggered. When you press a button on the keyboard, a keypress event is triggered.
These are all active events that are triggered by the user. But there are also other types of events, such as passive events, that is, events that happen in the background. You’ve already looked at the load event of the window object. It’s triggered when the web page in a browser window has finished loading.
Another example is the focus event, which triggers when an object gets focus. In the Google Maps API, there are lots of these passive events, such as tilesloaded, bounds_changed, and center_changed, which are all events of the Maps object.
■ Note Actually, when you click something, three events happen. They are click, mousedown, and mouseup. You can choose which one of these you want to capture. What you should know is that mousedown happens first, right when you hold down the mouse button. The mouseup event happens when you release the depressed mouse button, and click happens after mouseup and mousedown both have occurred. Similarly, when you press a key on the keyboard, three events happen. These are besides keypress, keydown, and keyup. Of these, keydown happens first, then keyup, and lastly keypress.
Listen for the Events
What these events have in common is that you can catch them in your code and do stuff when they are triggered. To do this, you need to add listeners. A listener is connected to an object and a certain event.
It just sits quietly and waits for the event to happen. When the event does happen, the listener pops into action and runs some code. In the Google Maps API, there’s a method for adding a listener that’s called google.maps.events.addListener(). It takes three arguments:
• The object it’s attached to.
• The event it should listen for.
• A function that is executed when the event is triggered. This function is called an event handler.
Adding a Click Event to the Marker
To add a click event to your marker, you need to extend the code with an event listener (Listing 5-8).
Listing 5-8. Adding an Event Listener
// Creating an InfoWindow with the content text: "Hello World"
var infowindow = new google.maps.InfoWindow({
content: 'Hello world' });
// Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function() { // Code to be run...
});
This code will attach a click event to the marker that will run some code when it’s being triggered.
Now all you have left to do is to write some code that will open the InfoWindow.
The InfoWindow object has a method called open() that will open the InfoWindow and make it visible on the map. The open() method takes two arguments. The first argument is a reference to the map object that it will be added to (in case you have more than one map on the page). The second argument is the object that the InfoWindow will attach itself to. In our case, you want to attach it to the marker being clicked. The reason you need to do this is that you want the InfoWindow to know where it should position itself on the map. If you provide it with an object, it will automatically position itself so that the tip of the stem of the speech bubble will point at the object. This argument is actually optional. You
could, if you wanted, skip this and instead set the position property of the InfoWindowOptions object to the correct position, but that’s not what you’re going to do here (Listing 5-9).
Listing 5-9. Opening an InfoWindow
// Creating an InfoWindow with the content text: "Hello World"
var infowindow = new google.maps.InfoWindow({
content: 'Hello world' });
// Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function() { // Calling the open method of the infoWindow
infowindow.open(map, marker);
});
Now you have all the components in place, and if you try this code, the map will initially display your marker. When you click the marker, the InfoWindow will display (Figure 5-9). Notice how it points at the marker.
Figure 5-9. An InfoWindow associated with the marker
The Complete Code
Listing 5-10 shows the complete code so far in the process. What it does is to create a map, put a marker on it, and attach a click event to the marker that will open an InfoWindow.
Listing 5-10. The Complete Code for Example 5-2 (function() {
window.onload = function() {
// Creating an object literal containing the properties // we want to pass to the map
var options = { zoom: 12,
center: new google.maps.LatLng(40.7257, -74.0047), mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.7257, -74.0047), map: map,
title: 'Click me' });
// Creating an InfoWindow with the content text: "Hello World"
var infowindow = new google.maps.InfoWindow({
content: 'Hello world' });
// Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function() { // Calling the open method of the infoWindow
infowindow.open(map, marker);
});
};
})();
More Markers
Now you know how to put a single marker on the map. You also have some rudimentary knowledge of how to tweak the marker a little bit and how to attach an InfoWindow to it. But what if you want to put more markers on the map? You could of course add them one by one, but eventually that’s going to add up to a whole lot of code. A much smarter thing to do is to use arrays and loops.
JavaScript Arrays
A JavaScript array is basically a collection of variables. It can contain whatever you want to put in it.
There are two ways of creating an array in JavaScript. The first one is to call the constructor of the Array object:
var myArray = new Array();
The other way is to create an array literal:
var myArray = [];
These two do exactly the same thing, but the second one is the preferred method these days and is also the method that I will stick to throughout this book.
With the array literal method, you can easily instantly fill the array with different things, such as, for example, a list of fruit.
var myArray = ['apple', 'orange', 'banana'];
Each of the items in the array list gets an individual index number. The first item gets number 0, the second item gets number 1, and so on. So to retrieve an item from an array, you simply use its index number.
myArray[0] // returns apple myArray[1] // returns orange myArray[2] // returns banana
Another way of adding items to an array is with the array’s native method push(). What push() does is take the passed value and add it to the end of the array. So, creating the same array as used earlier with this technique would look like this:
// First we create the array object var myArray = [];
//Then we add items to it myArray.push('apple');
myArray.push('orange');
myArray.push('banana');
This will produce exactly the same array as previously. This method is handy when you don’t have all the values up front and instead need to add them as you go along.
Arrays also have a native length property that returns the number of items that it contains. In our case, length will return the value 3 since myArray contains three items:
myArray.length // returns 3
Knowing this, you can loop through the array to extract its items.