Zoom and center for my events shortcode

The map should center and zoom according to found coordinates automatically. Without a direct link to the page it’s impossible to say what goes wrong.

What happens if you try [locations_map country=”FR”] ?

https://www.compagnons-grasjambon.com/agenda/ then click on the “Carte” link

same behaviour with locations_map

Aha… you are using tabs. A lot of things do not work in tabbed content. For example calendar pagination, etc.

Try using the shortcodes outside of the tab.

I did notice an error in the processing of the balloons in my code. So I will look into that, but in my tests the maps work fine, so I really do think the tab is causing something to not be loaded correctly.

You’re right, thank you for pointing me in the right direction.
I learned that in my case I’m supposed to call map.invalidateSize(); but it didn’t zoom on my events.
I’m not an expert, but I managed to display it using this :

var m = map.invalidateSize();
var bounds = [];
for(var index in m._layers) {
	var layer = m._layers[index];
	if (layer.hasOwnProperty('_latlng')) {
		bounds.push([layer._latlng.lat, layer._latlng.lng]);
	}
}
map.fitBounds(bounds);

Thank you for your help =)

• This reply was modified 6 years, 1 month ago by th3bish0p.

well, it’s not working anymore. In my console I have ReferenceError: map is not defined referring to the first line of the code in my previous message.

Did something change in the map initialization ?

You are using a function displayMap(). That is not mine! And yes, maps each have a specific ID (did that a few versions back already) so multiple maps can be shown on a single page.

Please remove your custom coding and try again.

In version 2.2. I have altered the ID’ing of maps and classes a bit, so they are more consistent. Please target EM OSM elements by class and never by ID.

To be able to use multiple maps on a single page, each map has to have a unique ID. So there are constructed differently.

All maps can be targeted (for CSS of jQuery) by their class.
Single Maps (#_LOCATIONMAP) have class .em-osm-map
and multiple marker maps ([locations_map]) have class .em-osm-map-multiple.

Thank you for you reply, I’ve noticed the id naming change (em-osm-map-##) and I changed my css code accordingly, the targeting is not the problem here I think.

I have a tab-like display and when I display the map, I used the sample of js code to zoom and display correctly the map :

var m = map.invalidateSize();
var bounds = [];
for(var index in m._layers) {
	var layer = m._layers[index];
	if (layer.hasOwnProperty('_latlng')) {
		bounds.push([layer._latlng.lat, layer._latlng.lng]);
	}
}
map.fitBounds(bounds);

and now the first line is triggering ReferenceError: map is not defined. Do you use github or something ? If I see your code I think it would be helpful.

Thank you for your time

Oh I get it, the js map variable contains the id number too ??
So I need to find a way to call the variable despite the id number

You have my code. It’s the actual plugin ??
Are using [events_map] or [locations_map] ?
Each on of those is assigned a random ID. Single maps get L(location ID)E(event ID), suck as L3E341.

The code for both is found in em-osm-maps.php

If you are only planning on using 1 map, you can change lines 217 and/or 320 to a static $id. Then in your custom code, make it:
var m = map<ID>.invalidateSize();
See line 381, as it contains almost the same as your snippet. ??

Ok, I managed to make by just updating a bit my piece of js code :

var element = document.querySelector("#events-map div[id^='em-osm-map-container-'] div[id^='em-osm-map-']");
		var words = element.id.split('-');
		var map = this['map'+words[3]];
		var m = map.invalidateSize();
		var bounds = [];
		for(var index in m._layers) {
			var layer = m._layers[index];
			if (layer.hasOwnProperty('_latlng')) {
				bounds.push([layer._latlng.lat, layer._latlng.lng]);
			}
		}
		map.fitBounds(bounds);

Thanks for your help ??