Leaflet Map initialize same map/different centers - leaflet

Question

I have one single map displayed on different pages. I want to have the same map centered and zoomed differently depending on the page which displays the map.
I've tried to edit the code but it seems only one "L.map" is admitted:
var map = L.map('single-map', {
center: [20, 20],
minZoom: 2,
zoom: 5,
scrollWheelZoom: false
});
anyone has an idea? Thank you very much for any help!

Answer 1

You can set on each php page a global javascript variable to know on which page you are and change so the map settings
page1.php
<script>
var page = 'page1'; // change between homepage and page1
</script>
<div id="page1" class="map"></div>
homepage.php
<script>
var page = 'homepage'; // change between homepage and page1
</script>
<div id="homepage" class="map"></div>
And then you can switch between the settings depanding on the page:
var id, center, zoom;
switch(page){
case 'page1':
id = 'page1';
center = [45, 15];
zoom = 8;
break;
case 'hompage':
// fall through
default:
id = 'homepage';
center = [46, 15];
zoom = 5;
break;
}
var map = L.map(id, {
center: center,
minZoom: 2,
zoom: zoom,
scrollWheelZoom: false}
);
https://jsfiddle.net/falkedesign/nLbp8d17/