Here is a simple way to use your own custom-designed markers on your store locator map in place of Google’s default markers.
Add this line of code:
var icon = new GIcon(); icon.image = "<a title="Link added by AutoLink filter: Plain text link" href="http://yourwebsite.com/logo.png">http://yourwebsite.com/logo.png</a>"; icon.shadow = "<a title="Link added by AutoLink filter: Plain text link" href="http://youwebsite.com/shadow.png">http://youwebsite.com/shadow.png</a>"; icon.iconSize = new GSize(50, 28); icon.shadowSize = new GSize(68, 28); icon.iconAnchor = new GPoint(37, 59); icon.infoWindowAnchor = new GPoint(31, 8);
Just before this line in the html page containing your store locator map:
var map; var geocoder;
Adjust the GSize for both iconSize and shadowSize if necessary. The first number in parentheses defines the width of your marker and the second number defines the height (both in pixels).
Now, add this line of code:
var marker = new GMarker(point, icon);
Just after this line:
function createMarker(point, name, address, city, state, zipcode, website, phone, email, group)
Save your work and view the locator map in a browser. Your map should now display your custom icons as the marker on each location.
Let me know if you have any problems or questions.