Use Thumbnail as Map Marker Icon

Not at the moment. But I will look into it for a future version, it does sound like a nice feature to have.

Okay, it’s possible if you edit the wpsl-gmap.js file, look for the function addMarker and remove this code.

if ( storeId === 0 ) {
    markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker;
	} else {
    markerPath = wpslSettings.path + "img/markers/" + wpslSettings.storeMarker;
}

mapIcon = {
    url: markerPath,
    scaledSize: new google.maps.Size( 24,35 ), //retina format
    origin: new google.maps.Point( 0,0 ),
    anchor: new google.maps.Point( 12,35 )
};

And replace it with the code below. You will get 32×32 store thumbnail as a markers. To make it look good you probably need to run over the markers after the map has loaded with js, apply a CSS class / style and give them a white border or so to make it more look like a marker. You can also add triangle at the bottom with CSS to make it look like it points to the map.

if ( storeId === 0 ) {
    markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker;

    mapIcon = {
        url: markerPath,
        scaledSize: new google.maps.Size( 24,35 ),
        origin: new google.maps.Point( 0,0 ),
        anchor: new google.maps.Point( 12,35 )
    };
} else {
    markerPath = infoWindowData.thumb;

    mapIcon = {
        url: markerPath,
        scaledSize: new google.maps.Size( 32,32 ),
        origin: new google.maps.Point( 0,0 ),
        anchor: new google.maps.Point( 12,35 )
    };
}

Wow! Thank you that works perfect.
One more question though. How about making the thumbnail still show up when viewing the directions map? When you click directions the map reverts back to using the default marker icon (A to B). Is this possible to change as well?
Thank you.

I don’t have time to look into this now, but I will try to do that in the weekend, so I will get back about this ??

No problem. Thank you. Plugin is working great for now.

It’s a bit complicated but this article should get you started, https://googlemaps.googlermania.com/google_maps_api_v3/en/map_example_direction_customicon.html

The first step doesn’t work though, but the code in this answer does https://stackoverflow.com/a/14298438/1065294.

The trick is to find the matching thumbnail, I think the only way to do that is to include the thumb url in the marker object like this.

marker = new google.maps.Marker({
    position: latLng,
    map: map,
    optimized: false, //fixes markers flashing while bouncing
    title: infoWindowData.store,
    draggable: draggable,
    storeId: storeId,
    icon: mapIcon,
    thumb: markerPath
});

Include the storeId when the calcRoute function is called.

calcRoute( start, end, storeId );

Then inside the calcRoute function you can do something like this to look up the store thumb path based on the storeId.

for ( i = 0, len = markersArray.length; i < len; i++ ) {
        if ( markersArray[i].storeId == storeId ) {
	   thumbPath = markersArray[i].thumb;
        }
}

Once you have the thumbpath, you can use it as they described in the first article I mentioned at the top of this post. I haven’t tested any code examples, but it should give you an idea how to do it.

Hi Tijmen. I tried your code but it isn’t working for me. Maybe something change in recent plugin versions.

if ( storeId === 0 ) {
    markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker;

    mapIcon = {
        url: markerPath,
        scaledSize: new google.maps.Size( 24,35 ),
        origin: new google.maps.Point( 0,0 ),
        anchor: new google.maps.Point( 12,35 )
    };
} else {
    markerPath = infoWindowData.thumb;

    mapIcon = {
        url: markerPath,
        scaledSize: new google.maps.Size( 32,32 ),
        origin: new google.maps.Point( 0,0 ),
        anchor: new google.maps.Point( 12,35 )
    };
}

I get en error like this:
“NetworkError: 404 Not Found – https://grupopropeller.com/web2015/concesionarios/%3Cimg%20width=%2245%22%20height=%2216%22%20src=%22http:/grupopropeller.com/web2015/wp-content/uploads/logo-header-200×70.png%22%20class=%22wpsl-store-thumb%20wp-post-image%22%20alt=%22AZ%20MARINE%22%20/%3E”

Where does the .thumb variable come from? Is in a php file? If so, maybe I can develop a code to fit my needs (display different marker icons based on category)

Once again, thanks in advance (and sorry for my bad english).

Hello, I recently updated to version 2.1.1. And the above modification does not appear to work any longer. Is there any way to get this working again?
Thank you.

Replace the code from this post with this code.

I will see if I can make it support this out of the box in a future version.

Hello, I am running the latest version of this plugin and cannot get this code to work.
Can you let me know if there is some new code perhaps?
Thank you.

I forgot to respond to your other msg before, sorry. I moved to Barcelona a few days ago, and I have been really busy with lots of things.

Replace the content in the wpsl-gmap.min.js with the this code, and then the thumbnail should come back. Do clear the browser cache / or any other WP caching plugins that you might use.

Excellent! That works great. Thank you for your help. I understand this type of option is a little weird, but I have a client who is adamant that they have this availability. Thank you again. It’s a great plugin with awesome support!

After implementing the above code I do notice now that the scaling of the map icon obviously effects the scaling of the thumbnail (used as the icon).
Is there a way to independently scale the thumbnail size when used in place of the default icon? I attempted to do this via css, however none of the elements have been assigned an id or class.
Let me know if you have any ideas.
Thanks.

Can you share the URL where you are using this code, or otherwise email me the url at tijmen at wpstorelocator.co ?