Ran Ran - 4 months ago
253 0

I have had great result using the Javascript from Miguel Marnoto's Codepen for two instances of Google Maps, now I'm trying to expand to three or four instances, I attempted to initialize by naming the two other instaces, MapRIght and MapThree below. I'm not having any luck, can anyone advise on how to extend what Miguel wrote here in the original Javascript CodePen. https://codepen.io/Marnoto/pen/VLjVZZ


My new version is below.

Javascript

Adding three instances of Google Maps on same page

// *
// * Two maps on the same page, expanded to three
// * 2015 - en.marnoto.com
// *

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

// 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
];


var markersDataThree = [
   {
      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();
   	});
	
   } else {
      
      mapOptions = {
         center: new google.maps.LatLng(40.601203,-8.668173),
         zoom: 7,
         mapTypeId: 'roadmap',
      };
      
	   mapThree = new google.maps.Map(document.getElementById('map-canvas-three'), mapOptions);
      
	   // a new Info Window is created
	   infoWindowThree = new google.maps.InfoWindow();
	
	   // Event that closes the Info Window with a click on the map
	   google.maps.event.addListener(mapThree, 'click', function() {
	      infoWindowThree.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", "mapThree");   
   }
   
}
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;
   } else {
      markersData = markersDataThree;
      map = mapThree;
   }
   // 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[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].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;
   } else {
      map = mapThree;
      infoWindow = infoWindowThree;
   }
   
   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);
   });
}