Changing the Marker Icon

Unless you specify otherwise, markers you add to a map will be displayed using a red teardrop-shaped icon with a black circle at its center. However, you can change this icon to any image stored in .png format that has been sized appropriately. We'll first look at some icons published by fellow Google Maps developers. Later, we'll see how you might go about creating your own icons.

Using existing icons

There are lots of sites that provide useful Google Maps icons. Here are some of my favorites:

• Map Icons Collection - a large number of categorized icons whose colors can be customized
• Benjaminkeen.com (Google Maps: Colored Markers) - icons lettered from A-Z in ten different hues
• Marker Icons (from Portland State University) - numbered icons in different hues

1. In your web space, create an icons sub-folder within your geog863 folder.
2. Go to Benjamin Keen's site and download his zip file of icons in .png format.
3. Choose a color and upload the images labeled A and B to your icons folder.
   
   We saw earlier that Marker objects can be created by passing a MarkerOptions object to their class constructor. And we saw that when defining the MarkerOptions object, you must set the map property to specify which Map object the Marker will be added to and the position property to specify where on the Map to place the Marker. When assigning a custom icon to a Marker, there are two optional properties that you may want to set: icon and shape.
   
   We'll begin with the icon property as it's the most important. This property is set by specifying an Icon as an object literal. This object allows you to specify the URL of the image, its size, what part of the image you want to contact the map, and whether the image is being scaled down from a larger size.
   
   Because the Icon object is required when we create the Marker, we're going to add the Icon code to the createMarker() function. Our first step will be to modify the function's input parameters to include a variable that will hold the name of the desired icon.

4. Return to your lesson4.html document and add a variable named img to the createMarker() function's parameter list after the map variable:

   function createMarker(point,info,map,img) {

5. Next, above the code that already exists inside the function, specify an Icon object as follows:

   var iconURL = 'icons/' + img;
   var iconSize = new google.maps.Size(20,34);
   var iconOrigin = new google.maps.Point(0,0);
   var iconAnchor = new google.maps.Point(10,34);
   
   var myIcon = {
     url: iconURL,
     size: iconSize, 
     origin: iconOrigin,
     anchor: iconAnchor
   };

   The first line of this code creates a string defining the location of the icon image. In this case, the image is located in a sub-folder -- relative to the location of the HTML page -- named icons, so the URL is built by concatenating 'icons/' with the name of the image that was passed into the createMarker() function.

   The next line creates an object of the Size class and stores a reference to it in a variable. Size objects are defined simply by specifying their width and height in pixels within the class constructor.

   The next two lines create objects of the Point class, a class that is used to create objects that define positions on images in pixel coordinates. For example, the coordinates defining the center of a 16x16 pixel image would be 8,8. When defining a Point object, the first argument to the class constructor is the x coordinate and the second argument is the y coordinate. Here the first Point object is being used to define the coordinates of the image's origin (the pixel in the upper-left corner). It is generally a good idea to set these coordinates to 0,0. The second Point object is being used to define the part of the image that should appear to be touching the map (i.e., where it should be anchored). For the teardrop-shaped icons, the anchor point should be defined as 10,34 (10 pixels to the right of the origin and 34 pixels down). It turns out that the API assumes an anchor point of (width/2, height) if one is not defined, so it is not really necessary to define one for this icon. But this shows you how to define the anchor point if you use an icon that has a different shape.

   Note

   You can find the width and height of an image in Windows Explorer by right-clicking on it, selecting Properties, and viewing the Details tab. You can determine the coordinates of your image's anchor point using any image manipulation software. For example, in Microsoft Paint, you would simply open the image, hover the mouse over the desired anchor point and make note of the coordinates reported in the lower right of the window.

   Finally, the four variables are used to set the properties associated with Icon objects. These property settings are stored in a variable called myIcon. With the Icon created, it can be used to set the icon property of the MarkerOptions object.

6. Add the line in bold to your code:

   var myMarkerOpts = {
     position: latlng,
     map: map,
     icon: myIcon
   }

   Recall that we added an img parameter to the createMarker() function's parameter list. Our next step will be to return to the initialize() function and specify the desired image name when making a call to the createMarker() function.

7. In the initialize() function, modify the calls to the createMarker() function so that they include the name of the desired icon (I used blue, you should specify the color you uploaded to your web space):

   createMarker(latlng,"some info window content",map,"blue_MarkerA.png");
   ...
   createMarker(latlng,"some other info window content",map,"blue_MarkerB.png");

   Note

   There are a number of different ways to set up the passing of the icon name to the createMarker() function. For example, if your page only used blue markers, you could choose to "hard-code" that into the function (var iconURL = 'icons/blue_Marker' + img + '.png';). In that scenario, your calls to the function would simply include the desired letter ('A', 'B', etc.).

   When using someone else's images as we did here, be sure that the owner of the images does not object. Also, save a local copy of the images to your server instead of referencing the originals. It is bad etiquette to ask someone else's server to serve icons that are being used on your site.

   At this point, you could view the map and see your custom icon. However, the map would suffer from a relatively minor deficiency: when hovering the mouse cursor over the icons, the cursor will change (i.e. the marker will become clickable) whenever the cursor is hovered over the entire 20x34 image instead of just the visible part of the image. To fix this problem, we'll need to set the MarkerOptions object's shape property.
   
   The shape property is set using a MarkerShape object, which has two required properties: coord and type. See the documentation of the MarkerShape class and note the different ways of specifying the shape depending on whether the marker is circular, rectangular, or irregular. In this instance, our marker has an irregular shape, so we need to set the type property to 'poly'. We also need to set the coord property equal to an array of x/y coordinate pairs that delineates the shape.

8. Add the following code to create the MarkerShape object:
   

   var iconShape = [8,33, 6,21, 1,13, 1,5, 5,1, 13,1, 18,6, 18,13, 12,21, 10,33];
   var myMarkerShape = {
     coord: iconShape,
     type: 'poly'
   };

   Note that I inserted spaces between coordinate pairs to make the list more readable. The spaces make no difference to the API.

   To determine the coordinates that describe your marker's shape, you should use some sort of image manipulation package like MS-Paint. Trace the boundary of the icon with your mouse, stopping where you would place the vertices if you were digitizing the shape in GIS software, for example. The software should report the coordinates as you move the mouse around, so you should jot down the coordinates at each stop.

9. Finally, we can set the shape property of the MarkerOptions object by adding the code in bold:

   var myMarkerOpts = {
     position: latlng,
     map: map,
     icon: myIcon,
     shape: myMarkerShape
   }

10. Save your document, re-load it in your browser and confirm that it looks and behaves as expected.

Creating your own icons

As mentioned above, any png-formatted image can be used as an icon for markers you add to your maps. If you wish to create your own icon, here are a number of points to consider:

• You will want to make sure the icon is sized roughly the same as Google's default icon (20 pixels wide by 34 pixels high) or smaller. It need not have the same exact dimensions, but you should avoid using images that have more than 40 pixels in either dimension.
• You may need to add a leader line to the image, so that the image's anchor point is clear to the user.
• The handy site FavIcons From Pics offers an easy way to create a .png file from other image formats such as .jpg or .gif. The site's primary purpose is to create .ico files that can be used to display a small logo to the left of the URL in a browser's address bar, but part of the zip file output is a .png file that happens to be a good size for mashup icons.

Now that you've seen how to jazz up your pages a bit with custom marker icons, let's move beyond plotting simple points to more complex line and polygon geometry.