Developing a custom store locator map: Using your own custom markers instead of Google’s default markers

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.

 

Here are links to all of the posts in this series on how to create your own store locator map:

 

Create a spreadsheet of your store locations

Create and populate the MySQL table

 Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location