I recently discovered that a store locator application I built was silently failing. It turns out that at some point, the Google Maps Utility Library 3 was moved to Github from its original home and it appears a lot of change happened along the way. One of the files that has been removed is StyledMarker.js, which my project depended on to create new map markers.

Since my application listed a numbered table of results below the map, I wanted the row number to correspond with the map marker so it would be easy to understand which store matched which row in the table. Google’s simple marker only allows for a single character of text (why? This seems kind of absurd).

To get around the problem, I ended up changing my markers from StyledMarker objects to simple GoogleAPI markers with references to icons I downloaded:

function addMapMarker(location, titleText, rowNumber, map) {
    return new google.maps.Marker({
        position:new google.maps.LatLng(location.Latitude, location.Longitude),
        map:map,
        title: titleText,
        icon: '/Content/images/MapIcons/number_' + rowNumber + '.png'
    });
}

 

It still boggles my mind a little bit that they can’t just allow multiple characters on the label. However, maybe there is already a better solution: when looking for info on this blog post, I found this: https://github.com/googlemaps/js-store-locator. I’ll have to give it a shot and see if it doesn’t make my store locator application a bit easier to manage.