Hey everyone,

 

I'm totally new here so i'm sorry if i've done this wrong.

 

I was wondering if anybody is able to help me understand how to place 'two' google maps onto one website page.

 

When I place the first one, it always works. However, when I place the second, things go wrong.

 

The main issue is that the second one on the page never works. It just shows a grey box and nothing else.

 

Does anybody have any idea what is happening here?

 

I'm not sure if I can paste code in or not, if you think it would help let me know!

 

Thank you very much!

 

 

Hello.

I can't really offer a solution but I think I know why it is happening.

When using the JavaScript API a lot of elements is generated and appended to the DOM. When you place the map twice on a page the script will try to create/append the same elements again and fail because of the duplicate elements. This will result in the appended elements only being attached to the first map. A simple solution could be to use the iframe embed code instead,

HTML:-
<div class="container">
<div id="map-canvas-left"></div>
<div id="map-canvas-right"></div>
</div>

===

CSS:-

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: flex;
}
#map-canvas-left, #map-canvas-right {
height: 250px;
width: 550px;
}
#iw_container .iw_title {
font-size: 16px;
font-weight: bold;
}
.iw_content {
padding: 15px 15px 15px 0;
}

====

Java Script: -

// *
// * Two maps on the same page
// * 2015 - en.marnoto.com
// *

// necessary variables
var mapLeft, mapRight;
var infoWindowLeft, infoWindowRight;

// markersData variable stores the information necessary to each marker
var markersDataLeft = [
{
lat: 40.6486333,
lng: -8.745,
name: "Camping Praia do Farol",
address1:"Rua Diogo Cão, 125",
address2: "Praia da Barra",
postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the last item of each marker
},
{
lat: 40.54955,
lng: -8.7498167,
name: "Camping Costa Velha",
address1:"Quinta dos Patos, n.º 2",
address2: "Praia da Costa Nova",
postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in the last item of each marker
},
{
lat: 40.6447167,
lng: -8.7129167,
name: "Camping Gafanha da Boavista",
address1:"Rua dos Balneários do Complexo Desportivo",
address2: "Gafanha da Nazaré",
postalCode: "3830-225 Gafanha da Nazaré" // don't insert comma in the last item of each marker
} // don't insert comma in the last item
];

var markersDataRight = [
{
lat: 40.6386333,
lng: -8.745,
name: "Camping Praia da Barra",
address1:"Rua Diogo Cão, 125",
address2: "Praia da Barra",
postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the last item of each marker
},
{
lat: 40.59955,
lng: -8.7498167,
name: "Camping Costa Nova",
address1:"Quinta dos Patos, n.º 2",
address2: "Praia da Costa Nova",
postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in the last item of each marker
},
{
lat: 40.6247167,
lng: -8.7129167,
name: "Camping Gafanha da Nazaré",
address1:"Rua dos Balneários do Complexo Desportivo",
address2: "Gafanha da Nazaré",
postalCode: "3830-225 Gafanha da Nazaré" // don't insert comma in the last item of each marker
} // don't insert comma in the last item
];

function initialize(setMap) {

var mapOptions;

if(setMap == "mapLeft") {
mapOptions = {
center: new google.maps.LatLng(40.601203,-8.668173),
zoom: 11,
mapTypeId: 'roadmap',
};

mapLeft = new google.maps.Map(document.getElementById('map-canvas-left'), mapOptions);

// a new Info Window is created
infoWindowLeft = new google.maps.InfoWindow();

// Event that closes the Info Window with a click on the map
google.maps.event.addListener(mapLeft, 'click', function() {
infoWindowLeft.close();
});

} else {

mapOptions = {
center: new google.maps.LatLng(40.601203,-8.668173),
zoom: 9,
mapTypeId: 'roadmap',
};

mapRight = new google.maps.Map(document.getElementById('map-canvas-right'), mapOptions);

// a new Info Window is created
infoWindowRight = new google.maps.InfoWindow();

// Event that closes the Info Window with a click on the map
google.maps.event.addListener(mapRight, 'click', function() {
infoWindowRight.close();
});
}

// Finally displayMarkers() function is called to begin the markers creation
displayMarkers(setMap);

// Create second map only when initialize function is called for the first time.
// Second time setMap is equal to mapRight, so this condition returns false and it will not run
if(setMap == "mapLeft"){
initialize("mapRight");
}

}
google.maps.event.addDomListener(window, 'load', function(){ initialize("mapLeft") });


// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(setMap){

var markersData;
var map;

if(setMap == "mapLeft"){
markersData = markersDataLeft;
map = mapLeft;
} else {
markersData = markersDataRight;
map = mapRight;
}

// this variable sets the map bounds according to markers position
var bounds = new google.maps.LatLngBounds();

// for loop traverses markersData array calling createMarker function for each marker
for (var i = 0; i < markersData.length; i++){

var latlng = new google.maps.LatLng(markersData.lat, markersData.lng);
var name = markersData.name;
var address1 = markersData.address1;
var address2 = markersData.address2;
var postalCode = markersData.postalCode;

createMarker(setMap, latlng, name, address1, address2, postalCode);

// marker position is added to bounds variable
bounds.extend(latlng);
}

// Finally the bounds variable is used to set the map bounds
// with fitBounds() function
map.fitBounds(bounds);
}

// This function creates each marker and it sets their Info Window content
function createMarker(setMap, latlng, name, address1, address2, postalCode){

var map;
var infoWindow;

if(setMap == "mapLeft"){
map = mapLeft;
infoWindow = infoWindowLeft;
} else {
map = mapRight;
infoWindow = infoWindowRight;
}

var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name
});

// This event expects a click on a marker
// When this event is fired the Info Window content is created
// and the Info Window is opened.
google.maps.event.addListener(marker, 'click', function() {

// Creating the content to be inserted in the infowindow
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' +
address2 + '<br />' +
postalCode + '</div></div>';

// including content to the Info Window.
infoWindow.setContent(iwContent);

// opening the Info Window in the current map and at the current marker location.
infoWindow.open(map, marker);
});
}