Tell us what you are trying to do?
Change the Map Marker - I am trying to change the default red Google Map Marker to something that works with our brand - however, when we try to upload our own icon, the map starts to fail because the icon is much, much too large. When we used the CSS that the other support person, Luo, gave us - we start to encounter a lot of problems:
1.) The Tooltip / label is no longer correctly positioned over the selected map marker
2.) The "spider" options that occurs when there is more than one pin per location, is also not positioned correctly. You can see that in the screenshot, the pin, the overlay and the "spider" are all in different positions.
Is there any documentation that you are following?
No, although a previous support helper Luo Yang did give us some CSS code
Is there a similar example that we can see?
Any major map
What is the link to your site?
Hello,
I assume we are talking the previous ticket here:
https://toolset.com/forums/topic/help-changing-the-map-markers/
And I can see the problems as you mentioned above in your website:
hidden link
Since you have already send the duplicator package to my email box, I am downloading the file, trying to duplicate the same problem, will update here if there is anything found.
Yes, thank you I appreciate that - you are right that it is related to the previous ticket - I was able to change the map marker (which we couldn't do before) however the problem now is that the positioning is unpredictable. Thank you for using duplicator, talk soon.
Max
I can duplicate the same problem, you are right, those CSS codes will conducts the problem you mentioned above, the map marker shortcode will display the marker icon in it's native size, so in your case, I suggest you create a small image and use the small image as the marker icon, for example:
1) Download below image file
hidden link
It is a small image resized from your image file with size 30 * 30
2) Upload above image to your website, for example the image's URL is:
hidden link
3) Edit the post view "Home Master Map" ID 312
in section "Loop Editor", replace the old large image URL with the new small image URL, for example, replace:
<em><u>hidden link</u></em>
With:
<em><u>hidden link</u></em>
And test again, I have tested it in my localhost, it works fine, see screenshot marker-size.JPG
Hello Luou,
Thank you for your help. This is close, but as you can see from the attached image, this renders the map marker at *half* of the full resolution, so we won't be able to use that.
Can you help us create a custom map marker that is at full resolution?
We don't provide such kind of support, I suggest you try to use some image tools, for example photoshop to generate the image files as you want:
1) image with small size(width and height)
2) full resolution
Hi Luou,
I think you misunderstood - yes, of course we have Photoshop that could generate an image of any size or format.
As I'm sure you know, the only way to achieve full resolution ("retina") on web, is to create a picture at:
1.) 2x the optical pixels (eg, a 60x60 px image is displayed at 30x30 pixels via CSS), or
2.) Use a vector format like an SVG
I am asking you how to achieve *either* of these - the solution you have provided only allows for a non-retina/low-resolution version of the map markers.
Thanks for the details, I am checking it in my localhost, with your duplicator package, will update here if there is anything found.
You can try to follow our document to change the map settings:
https://toolset.com/documentation/user-guides/programmatically-change-map-settings/
For example:
jQuery( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
// Get the markers
var map_id = 'map-10';
var markers_arr = WPViews.view_addon_maps.markers;
var markers = markers_arr[map_id];
// Use Maps API .setOptions() method to programmatically change any option on the map.
//console.log(markers);
var my_icon = {
url: '<em><u>hidden link</u></em>',
size: new google.maps.Size(30, 30),
};
Object.keys(markers).forEach(function(key){
marker = WPViews.view_addon_maps.get_map_marker(key, map_id);
if ( markers ) {
marker.setIcon(my_icon);
}
});
} )
More help:
hidden link
Icon interface
