We have been using the Google Maps API on W303 for a couple of years to show an embedded map of the location of apartments and houses for rent on W303. Recently, we wanted to expand beyond the basics of embedded Google Maps so we thought we’d share our research and discovery with you all.

Key Reference Resources

• Google Maps API Reference
• Google Maps API Demo Gallery

Tips and Hints

Custom Markers

One of the things we wanted to do on our embedded maps was to customize the marker with a little house icon instead of the standard Google maps icon. There are a lot of options on customizing markers and it was initially challenging to wade through the advanced stuff that we didn’t need for a very simple marker customization. Below is the code we came up with to insert after a valid map location has been identified.

var house = new GIcon();
house.image="/images/house_icon.gif";
house.iconSize=new GSize(25,25);
house.iconAnchor=new GPoint(12.5,12.5);
var marker = new GMarker(point,{icon:house,clickable:false});
map.addOverlay(marker);

We’ll go through this line by line…

1. The first line specified that you want to create a new icon and assign it to the javascript variable house.
2. The second line assigns the image location to the variable through the image property. In our case, the icon we wanted to use was in the w303 images directory. The path to your icon can be relative or use the full path (http://w303.com/images/house_icon.gif).
3. The third line sets the dimensions of the icon for the map through the iconSize property. Our icon is 40 pixels x 40 pixels in its original form and we’ve resized it for our map to 25 pixels x 25 pixels.
4. The fourth line specified where to place the icon on the map relative to the exact map location through the iconAnchor property. By default, the top left corner of the icon will be placed at the map location. The parameters we’ve indicated here are the number of pixels to offset the icon from the top left corner. Because we wanted the icon centered on the point and our icon is 25×25, we set the anchor to a 12.5 pixel offset vertically and horizontally.
5. The fifth line is where we replaced the existing line for our map marker variable and specified that we wanted to use our house icon. We turned off our event listener and eliminated the infobox for our rental maps, so we also set the clickable option to false.
6. The sixth line of our code sample existed before the changes but we have shown it to illustrate where to place your custom marker code.