The most common use of maps on the Internet is to visualize the geographic position of something. The Google Maps marker is the perfect tool for doing this.
A marker is basically a small image that is positioned at a specific place on a map. Its most frequent incarnation is the familiar drop-shaped marker that is the default marker in Google Maps (Figure 5-1).
Figure 5-1. The default map marker
Setting a Starting Point
Before you start learning how to use markers, let’s set a starting point for this example. It contains nothing new. It’s just a plain map that’s centered on Manhattan in New York City (Listing 5-1).
Listing 5-1. A Starting Point (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);
};
})();
Figure 5-2 shows what this map will look like.
CHAPTER 5 ■ X MARKS THE SPOT
Figure 5-2. An empty map
A Simple Marker
If you want to put a marker on your map with the default look, it’s easily achieved with only a few lines of code.
To create a marker, you need to use the google.maps.Marker object. It takes only one parameter, which is an object of type google.maps.MarkerOptions. MarkerOptions has several properties that you can use to make the marker look and behave in different ways. For now, let’s settle on the only two required properties: position and map.
• position
This property defines the coordinates where the marker will be placed. It takes an argument in the form of a google.maps.LatLng object.
• map
The map property is a reference to the map to which you want to add your marker.
OK, so now that you know how to create a marker, let’s put that knowledge to good use. Add the code in Listing 5-2 right after the code that creates the map.
Listing 5-2. Creating a Marker and Adding It to the Map // Adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.7257, -74.0047), map: map
});
Download from Wow! eBook <www.wowebook.com>
This little snippet of code will put a marker on the map. It has the look of the default Google Maps marker, and you can’t do anything with it really, but it dutifully marks a spot on the map, as shown in Figure 5-3.
Figure 5-3. A simple marker
Adding a Tooltip
The first thing you might want to do is to add a tooltip to the marker. A tooltip is a yellow box with some text in it that appears when you hold the mouse pointer over an object. To add a tooltip to a marker, you’ll use the property title. It’s as simple as setting the title property of the MarkerOptions object (Listing 5-3).
Listing 5-3. Adding a Title to the Marker // 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' });
Doing this will add a nice little tooltip to the marker when you hold the mouse pointer over it, as shown in Figure 5-4.
CHAPTER 5 ■ X MARKS THE SPOT
Figure 5-4. A marker with a tooltip
Changing the Icon
If you’re not satisfied with the default icon, you can change it to a custom one. The easiest way to do this is to set the icon property of MarkerOptions to an URL of a suitable image.
Google hosts a number of images that you are free to use. If you go to http://gmaps-
samples.googlecode.com/svn/trunk/markers/blue/blank.png with your web browser, you will find the image shown in Figure 5-5. And that’s the one you’re going to use for this example (Listing 5-4).
Figure 5-5. A custom marker Listing 5-4. Changing the Icon
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.761137, -73.97674), map: map,
title: 'Click me',
icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png' });
Doing this will change the look of the marker, as shown in Figure 5-6.
Figure 5-6. A simple custom icon
In this example, I’ve been using an icon that resides at Google’s servers, and that’s OK since Google is also the one providing the API. Generally, though, you should not link to images that reside at servers belonging to others; rather, you should keep them on your own server and feed them from there. One of the reasons is that it’s just plain wrong to steal other people’s bandwidth without permission. Another reason is that if the people running the server move the files, your application will break.
Icons Supplied by Google
Google has a collection of standard icons that you can use on your map. Most of them use a similar URL that looks like this:
http://gmaps-samples.googlecode.com/svn/trunk/markers/color/markerx.png where color is one of the following values:
• blue
• green
• orange
• pink
• red
and x is a number between 1 and 99. If you want a marker with no number, use the filename blank.png.
Consider Listing 5-5.
CHAPTER 5 ■ X MARKS THE SPOT
Listing 5-5. Changing the Icon // 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',
icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/marker1.png' });
Notice that this example uses the URL http://gmaps-
samples.googlecode.com/svn/trunk/markers/green/marker1.png. This will display a green icon with the number 1 in it on your screen (Figure 5-7 gives you an idea of how it will look).
Figure 5-7. One of the markers that Google provides
This is an easy way to construct a custom icon, but if you look at it closely, you will notice that it doesn’t have a shadow. In Chapter 6, you will look at how to create a more complex icon with a shadow, a custom shape, and a defined clickable area. You will also learn about a really clever way to deal with scenarios where you need lots of different marker icons.
The Complete Code So Far
At this point, before you start adding more functionality to the map, I think it’s best to stop for a minute and review the complete code of this example so far (Listing 5-6).
What you’ve done is to add a marker to the map and add a tooltip to it. You’ve also changed the default icon.
Listing 5-6. The Complete Code for Example 5-1 (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',
icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png' });
};
})();
■ Tip Remember that the code is available for download from the book’s web site at
www.svennerberg.com/bgma3. The name of the example is always mentioned in the code caption.
Adding an InfoWindow
Often when marking places on a map, you will want to show additional information related to that place. The Google Maps API offers a perfect tool for this, and that’s the InfoWindow. It looks like a speech bubble and typically appears over a marker when you click it (Figure 5-8).
Figure 5-8. An InfoWindow
CHAPTER 5 ■ X MARKS THE SPOT
A Simple InfoWindow
Much like the Marker object, the InfoWindow object resides in the google.maps namespace and takes only one argument, and that argument is an object called InfoWindowOptions.
Like the MarkerOptions object, the InfoWindowOptions object has several properties, but the most important one is content. This property controls what will show inside the InfoWindow. It can be plain text, HTML, or a reference to an HTML node. For now, you will stick with plain text, but do note that you can use full HTML if you like (Listing 5-7). That also means that you can include any HTML element, image, or video and then style it any way you want.
Listing 5-7. Creating an InfoWindow with the Text “Hello World”
// Creating an InfoWindow with the content text: "Hello World"
var infowindow = new google.maps.InfoWindow({
content:'Hello world' });
Now you’ve created an InfoWindow object that will contain the text “Hello world,” but it doesn’t automatically appear on the map. What you want to do is to connect it with the marker so that when you click the marker, the InfoWindow appears. To do this, you need to attach a click event to the marker.