Using the New Marker and Shadow in your Map
If you did the tutorial called "Custom Google Map Markers" then you've seen what we're about to show here. You need to 'tell' the Google Map a few things about your marker, including:
- marker image name
- marker image size
- shadow image name
- shadow image size
- where the image is anchored
The JavaScript Code
Following is the exact JavaScript needed to display the pencil and pencil's shadow that we've create in this tutorial:
var MyIcon = new GIcon(); // create a new Google Icon object
MyIcon.image = "images/pencil.png";// image file name
MyIcon.shadow = "images/pencil_shadow.png";// shadow file name
MyIcon.iconSize = new GSize(8, 30);// width (px) and height (px)
MyIcon.shadowSize = new GSize(30, 30);// the shadow's size
MyIcon.iconAnchor = new GPoint(5, 30);// base of the icon
var marker = new GMarker(point, MyIcon);
map.addOverlay(marker);
MyIcon.image = "images/pencil.png";// image file name
MyIcon.shadow = "images/pencil_shadow.png";// shadow file name
MyIcon.iconSize = new GSize(8, 30);// width (px) and height (px)
MyIcon.shadowSize = new GSize(30, 30);// the shadow's size
MyIcon.iconAnchor = new GPoint(5, 30);// base of the icon
var marker = new GMarker(point, MyIcon);
map.addOverlay(marker);
The Resulting Map:
Right-click here and save the file to your hard drive. This contains the HTML and JavaScript for the map.