Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi, I have a question about the Site Origin google maps widget. I have a marker set up to be at a certain Longitude and Latitude, however when I zoom on the map, the marker moves significantly away from where it should be. Rather than stay anchored at the exact longitude and latitude, it shifts at every zoom change to the point where it can be several hundred kilometres from where it should be at a moderate zoom out level. Only when you zoom in to the maximum level can you tell where the marker actually is.
I’ve searched the threads but cannot find a solution. I’m new to this so any help would be greatly appreciated.
Doug
Hi Doug,
Unfortunately, I can’t seem to replicate this issue. Would it be possible for you to send me an export for this widget? To do this please open the page with the SiteOrigin Google Map widget in the editor and click the Layout button in the Page Builder toolbar. Then click import/export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.
Hi Alex,
Thanks for getting back to me. I believe I have done what you requested, however I could not see any export button in the layouts tab.
I instead installed the plugin Widget Importer & Exporter. I exported all the widgets and the file can be viewed here: https://u.teknik.io/J6Sqp.wie
I hope this helps. Thanks so much for the help too, I really appreciate it.
Doug
This is a thread that is describing the exact problem I am having, however I do not know how the solution is to be applied to the wordpress system.
https://stackoverflow.com/questions/20981416/google-maps-api-svg-marker-moves-relative-to-map-when-you-zoom
Hi Doug,
Very sorry for the delay.
The provided export data file is actually empty. Can you please try the Page Builder export functionality to try and export the data?
I’ll forward that link to the development team.
Hi Doug,
Oh and do you have a public URL where we can take a look at your map?
Hi Alex,
No worries at all, thanks for the help.
I have tried again, and this is the Teknik file.
https://u.teknik.io/26W4U.json
Apologies I have no background in any coding/ web design so am tryign to learn myself through tutorials etc.
http://www.cnstore.com.au/?page_id=153 This is the live link. Notice hwo the marker moves significantly away form the zoomed in location..
Cheers,
Doug
Hi Doug,
Thanks. I’ll forward this to the development team. I would recommend accouting for this in the meantime by altering the placement slightly to move it to the correct place. Be aware that you may see different results on maps.google.com.au so be sure to double check the result location is present.
Hi Alex.
It is at the correct position when zoomed in to the maximum level, however as you zoom out the icon gets progressively further away from the correct longitude and latitude.
It is the exact problem that the other person was having in the thread I linked one week ago.
Thanks again,
Doug
Hi Doug,
Does this issue remain for you if you increase the size of the logo to meet the edges of your marker image? We ask as there’s a lot of empty spacing present. For reference, here’s a screenshot of your marker icon. The chequered background is the transparent part of your image and the dark area is the end of the image. There’s a large amount of empty spacing present in your image.
We just want to rule this out before proceeding.
Hi Alex,
I will try to make it the full size this morning, however I don’t really know why that would have an effect upon the positioning?
Are you able to see the problem when you visit the website as it is? I just want to be sure you are seeing the same problem as I am.
Regards,
Doug
Hi Doug,
I can confirm we’re able to see the problem on your website. Let me know how you go mate.
Hi Alex,
I have cropped the image as suggested so that there is no blank space. This seems to have fixed the anchoring issue, however the thumbnail now seems to crop the marker, so that the whole logo is not displayed. (I think this may have been why I initially moved to the logo with the space in it).
It can be seen at the following link.
We are slowly getting there! Thanks once again, I really do appreciate your help!
Doug
Additionally, the anchor seems to anchor the middle of the bottom edge to the coordinate specified, rather than the middle of the thumbnail itself. This means that when you zoom out to greater degrees it moves further from the coordinate, rather than remaining centered on it at all zoom levels….
I forgot to include the link;
http://www.cnstore.com.au/?page_id=153
We are making progress though…
Doug
Now that I think about it, this will be the issue that is causing troubles.
As you zoom out, the distance of the centre of the marker moves further away from the tether point (even though the bottom of the image remains tethered to this spot). When there is blank space at the bottom of the image this effect is seemingly multiplied, with the logo seeming to move further away.
If we can get the thumbnail to be tethered instead by its centre, rather than the middle of its bottom edge, the issue should resolve….
Any ideas how we could do this?
Doug
Hi Doug,
The marker itself appears to be cropped incorrectly. For reference, here’s the full marker image:
I recommend cropping the logo outside of WordPress as the image cropping functionality in WordPress is “okay” and this sort of result is fairly common.
I’ve forwarded your feedback to the development team.
Hi Alex,
That is how I am seeing the image as well. It has been cropped properly, using Photoshop and only when I put it as the marker does it appear as though the sides have been chopped off. The widget seems to be cropping it to a square, the actual image as properly cropped is a rectangle.
I initially used this same cropped image and had the same problem. I then made the image a square, by putting extra blank space at the top and bottom so that it wouldn’t appear like this when used in the widget.
Is there a way to change the point of the image which is used as the tether point? Ie from the bottom centre of the thumbnail ()as it currently is), to the centre of the thumbnail?
Regards,
Doug
Hi Doug,
Hm. Can you please resize your marker icon to be 150×114 and try that? That should avoid the cropping.
Unfortunately, no. There’s no current way to adjust the tether point and the development team has decided (from a standards standpoint) not to include the ability to change the tether point. You may be able to alter the Google Maps widget object itself but that’s sadly not something I’m able to assist you with.
Hi Alex,
Thanks very much, I recropped it to that size and removed any blank space from the bottom of the image and put it at the top. This seems to have fixed the cropping issue.
It would be good to have that tethering functionality, however I understand that might open a can of worms.
Thanks very much for your help through this, I really appreciate it!
Kind regards,
Doug