Map element / Map center position setting

[UnReal33]

Hello,

I use classic map element, Google option.

I could set Markers fine, but I cannot set the center position of the whole map.

With lower zoom level all of my markers are visible, but the the marker bubbles overlap, so many of them are not visible (I’d like to keep them open at start). With the desired zoom level one of the markers outreach the right edge of the frame.
I’d like to adjust where the center of the map should be, so all of my markers should be within the frame.

If I drag the map within the inspection window, it jumps to weird positions.
If I type values in the Long/Lat fields, they just don’t effect the actual position of the map - neither in the editor, nor on the actual appearance of the page. Not even if I leave these fields blank.

Please advise.
Thanks.

[nabeel]

Hi @UnReal33,

Thank you for reaching out to us. To center a Google Map, you need to set the correct latitude and longitude where you want your map to centered at. As an example I’ve added the latitude and longitude of Dubai with the zoom level of 10 (see the settings below)

The Map is now centered at Dubai (see screenshot)

If your latitude and longitude values are correct, you need to experiment with the zoom level value to adjust the map as you need and then you can add your markers within the visible region with correct latitude and longitude values:

As an example I added a marker nearby my centered position and here’s how it looks:

I used Classic Google Map element in the above example. Hope this helps!

[UnReal33]

Hi @nabeel,

Thanks for the fast response.
This is how my map setup page looks like.

I hope this is the same you are talking about.
For me it seems to be the the map settings - as the zoom works fine on the map.
The issue is, no matter what I type in the two fields (latitude/longitude), it has no effect
on the map position. To demonstrate, I typed in the coordinates you gave, and it has not changed to Dubai…
(neither in the editor window nor on the actual webpage, after saving and refreshing it).
Anything else works fine with the map except for this.
Thanks for taking time to respond.

[lely]

Hi @UnReal33,

Can we do basic troubleshooting first? Please check this article:

https://theme.co/docs/common-issues

No need to go through everything. Please focus on the following test based on the article:

Theme Update. Forget this if you are updated
Testing for Plugin Conflict
Child Theme
CSS/JS Customization

Once you did that basic test and the issue still persists, please share site URL and credentials inside a secure note so can see the issue directly. Please also include the page where the issue exists. Thank you.

[UnReal33]

Hi @lely,
Thanks for the response.
I ran through the troubleshooting as you advised.
The theme is up to date, turned on/off plugins and child theme.
Has no effect on the issue.
The CSS/JS customization neither as far as I see.
I left a secure note with the required credentials.
Hope I gave you all the details you required.
Thanks for your help.

[rad]

Hi @UnReal33,

Unfortunately, it seems there is security from your site that blocks access from other countries. I can’t access and log in, perhaps you can disable that temporarily while we’re investigating it?

And please let me know the LATITUDE and LONGITUDE value that you prefer so I can confirm it on my test. Or should it be the same on the second map?

Thanks!

[UnReal33]

Hi @rad
Thanks for attempting to solve the problem.
I turned Jetpack’s security, and All In One WP Security off, hopefully you can get through this time.
(I wasn’t aware of access from other countries was blocked.)
Please try with these Lat/long coordinates.
47.529606, 18.498210
However I set them to 20, 20 and just did not change anything
Thanks.

[lely]

Hi Istvan,

Unfortunately, I still cannot access the admin of your site. It says forbidden. I added the cordinates you have given on my test site. Also added it as marker. It seems the center and it is the same look on your site page:

Both Classic Map and V2 Googel Map is working and rendering fine. I think your issue is not about the theme. Because there are location that is so far away and there are location to close to each other. I would suggest instead for the Marker popup START OPEN option to be OFF. Then let the customer open it. This will avoid the initial overlap of the popup. Theme map elements just display how it is. We cannot use higher zoom level if your location is far from each. It will not cover everything.

[UnReal33]

Hi @lely
Thanks for the hint.
Would you please try again to log in with the provided user/and password.
I checked it with the service provider who temporarily disabled the protection from some countries.
If you still cannot login, please let me know which country are you trying from, so they can enable.
Thanks,
István

[ruenel]

Hello István,

I have investigated your issue and I found out that you were missing some of the Advanced Map settings. This is because the Advanced Mode is disabled. To see all of the Map options, you need to turn on the Advanced Mode (which I already did by the way) by going to the Settings > Preferences > Advanced Mode

I went ahead and edited your map. I am seeing this now.

Normally, if you only have one marker, you use the longitude and the latitude for marker and the marker will be placed in the middle of your map. In your case, it is different because you have several markers. To make sure that all your markers are visible in the middle of the map, you will have to adjust the zoom level. At the moment, I have adjusted it to 8. All of your markers are now displaying on the map.

Kindly check your page now.

[UnReal33]

Hi @ruenel,

Thanks for your help.
I guess the advance mode is user related, so as a newly created user you had to set it for yourself.
I’ve already set and been using this option so far.
If you check my screenshot under post #3 it has the same controls as yours.

However I mentioned in my initial post that a lover zoom level (8 as you suggested) makes all markers visible, but the marker popups overlap.

It is an option to set the marker popups to OFF initially as @lely suggested.
I did some workaround with these controls.

However none of these has any effect on the original issue why I asked for support.
Which is: no matter what values I type in the Lat/Long field of the map (or even leave it blank) it does not effect the map position. Which means they are ineffective or to put it this way useless in my case.
I set it to 20/20 which is in Africa (Chad respectively) but nothing changed.

So if you please could check

• whether the issue exist if you set these values (e.g. to extremes)
• what is the reason of this probably unexpected behavior
• and of course what can one do to fix it.

Thanks and really appreciate your efforts.

István

[ruenel]

Hello István,

Because you have already placed the markers, the map will try to display those markers within the map area. The zoom level played a factor in centering it as well. I think the best case solution to this issue is to find out the central longitude and latitude that you can use on your map. To do that, please go to Google Maps and visit your map:

• https://www.google.com/maps/@47.4869286,18.771869,10z

I am not sure what is the actual center point of your map. Having to set up your map first in Google Maps will be able to help you decide which longitude and latitude that you will use as the main point of your map. You can drag the map, adjust the zoom level and when you find that it is already perfect, you can then take the values into your Map element added into your page.

Hope this makes sense.

[UnReal33]

Hi @ruenel,

Thanks for your time and effort.
What you described is exactly what I was trying to do previously before I asked for help.
I chose 47.6,18.4 (to make it simple) to be the center of the map.
(https://www.google.hu/maps/@47.6,18.4,9z)
If I resize the Google Maps browser window horizontally, vertically or combined, it always remains the center, so there, it works fine.
Therefore I copied these coordinates to the Lat/Long fields of the map on the very page, just the way you suggested.
But per result it did not happen to be the center.

To demonstrate this I created a map marker named “Desired center” with the very same coordinates.
If you take a look at my two screenshots, the yellow lines’ crosspoint is definitely not matching the “Desired center” marker position neither in the editor window nor on the frontend in the browser.

So I started some workaround and realized, no matter what values I set in the map window’s Lat/Long fields, the map position does not change at all.

This was the point where I asked for help.
I got very useful advices from you all - thanks guys,
but the the original problem was left unanswered.

I hope I could clearly describe the issue now.
Please advise.

[christian]

Hey István,

It’s almost impossible if not very hard to place a marker to the center IF you have a lot of OPENED markers because Google Maps will be the one to average the center based on open markers.

With that said, we can do nothing if you need opened markers. You’d need to hire a developer to customize Google Maps so I’d recommend you close them off.

Hope that helps.

[UnReal33]

Hi @christian ,

So if I got it right, the conclusion is:
The map Lat/Long fields have control over the map position only when the map is empty or there are only a few markers on it.
If there are many markers, Google Map takes over the control and the Lat/Long fields become useless.
If it is so, it would be a good idea to include this in the knowledge base, to save others from spending much time on useless efforts.
Thanks a lot for your help.

[nabeel]

Hey István,

If you set the Map Latitude & Longitude, it will set the Map center for any numbers of Marker you have, the center won’t move no matter how many markers you add:

Now if you’ve many Markers with very random Latitudes & Longitudes (i.e far from the Map center), they will obviously go out of the visible Map area (based on the zoom level you set) or they will look scattered but this will not move your Map center position. To adjust this, you need to play with the zoom level to make sure your markers are visible inside the visible Map area and if the markers jumbled up, keep the markers content closed.

You can also checkout the Google Map’s official documentation and try out different scenarios here https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Hope this helps!