javascript - How to add three instances of Google Maps on same page -
i have had great result using javascript miguel marnoto's codepen 2 instances of google maps, i'm trying expand 3 or 4 instances, attempted initialize naming 2 other instaces, mapright , mapthree below. i'm not having luck, can advise on how extend miguel wrote here in original javascript codepen.
https://codepen.io/marnoto/pen/vljvzz
my new version below.
// * // * 2 maps on same page, expanded 3 // * 2015 - en.marnoto.com // * // necessary variables var mapleft, mapright, mapthree; var infowindowleft, infowindowright, infowindowthree; // markersdata variable stores information necessary each marker var markersdataleft = [ { lat: 40.6486333, lng: -8.745, name: "camping praia farol", address1:"rua diogo cão, 125", address2: "praia da barra", postalcode: "3830-772 gafanha da nazaré" // don't insert comma in 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 last item of each marker }, { lat: 40.6447167, lng: -8.7129167, name: "camping gafanha da boavista", address1:"rua dos balneários complexo desportivo", address2: "gafanha da nazaré", postalcode: "3830-225 gafanha da nazaré" // don't insert comma in last item of each marker } // don't insert comma in 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 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 last item of each marker }, { lat: 40.6247167, lng: -8.7129167, name: "camping gafanha da nazaré", address1:"rua dos balneários complexo desportivo", address2: "gafanha da nazaré", postalcode: "3830-225 gafanha da nazaré" // don't insert comma in last item of each marker } // don't insert comma in 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 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 last item of each marker }, { lat: 40.6247167, lng: -8.7129167, name: "camping gafanha da nazaré", address1:"rua dos balneários complexo desportivo", address2: "gafanha da nazaré", postalcode: "3830-225 gafanha da nazaré" // don't insert comma in last item of each marker } // don't insert comma in 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); // new info window created infowindowleft = new google.maps.infowindow(); // event closes info window click on 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); // new info window created infowindowright = new google.maps.infowindow(); // event closes info window click on 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); // new info window created infowindowthree = new google.maps.infowindow(); // event closes info window click on map google.maps.event.addlistener(mapthree, 'click', function() { infowindowthree.close(); }); } // displaymarkers() function called begin markers creation displaymarkers(setmap); // create second map when initialize function called first time. // second time setmap equal mapright, condition returns false , not run if(setmap == "mapleft"){ initialize("mapright", "mapthree"); } } google.maps.event.adddomlistener(window, 'load', function(){ initialize("mapleft") }); // function iterate on markersdata array // creating markers 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; } // variable sets map bounds according markers position var bounds = new google.maps.latlngbounds(); // loop traverses markersdata array calling createmarker function each marker (var = 0; < 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 added bounds variable bounds.extend(latlng); } // bounds variable used set map bounds // fitbounds() function map.fitbounds(bounds); } // function creates each marker , sets 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 }); // event expects click on marker // when event fired info window content created // , info window opened. google.maps.event.addlistener(marker, 'click', function() { // creating content inserted in 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 info window. infowindow.setcontent(iwcontent); // opening info window in current map , @ current marker location. infowindow.open(map, marker); }); }
your code has syntax errors 1. there can 1 else in if ... else if ... else ... statement. 2. string passed document.getelementbyid() has match actual dom element id, have spaces in yours.
code snippet:
// * // * 2 maps on same page, expanded 3 // * 2015 - en.marnoto.com // * // necessary variables var mapleft, mapright, mapthree; var infowindowleft, infowindowright, infowindowthree; // markersdata variable stores information necessary each marker var markersdataleft = [{ lat: 40.6486333, lng: -8.745, name: "camping praia farol", address1: "rua diogo cão, 125", address2: "praia da barra", postalcode: "3830-772 gafanha da nazaré" // don't insert comma in 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 last item of each marker }, { lat: 40.6447167, lng: -8.7129167, name: "camping gafanha da boavista", address1: "rua dos balneários complexo desportivo", address2: "gafanha da nazaré", postalcode: "3830-225 gafanha da nazaré" // don't insert comma in last item of each marker } // don't insert comma in 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 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 last item of each marker }, { lat: 40.6247167, lng: -8.7129167, name: "camping gafanha da nazaré", address1: "rua dos balneários complexo desportivo", address2: "gafanha da nazaré", postalcode: "3830-225 gafanha da nazaré" // don't insert comma in last item of each marker } // don't insert comma in 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 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 last item of each marker }, { lat: 40.6247167, lng: -8.7129167, name: "camping gafanha da nazaré", address1: "rua dos balneários complexo desportivo", address2: "gafanha da nazaré", postalcode: "3830-225 gafanha da nazaré" // don't insert comma in last item of each marker } // don't insert comma in 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); // new info window created infowindowleft = new google.maps.infowindow(); // event closes info window click on map google.maps.event.addlistener(mapleft, 'click', function() { infowindowleft.close(); }); } else if (setmap == "mapright") { 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); // new info window created infowindowright = new google.maps.infowindow(); // event closes info window click on map google.maps.event.addlistener(mapright, 'click', function() { infowindowright.close(); }); } else if (setmap == "mapthree") { 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); // new info window created infowindowthree = new google.maps.infowindow(); // event closes info window click on map google.maps.event.addlistener(mapthree, 'click', function() { infowindowthree.close(); }); } // displaymarkers() function called begin markers creation displaymarkers(setmap); // create second map when initialize function called first time. // second time setmap equal mapright, condition returns false , not run if (setmap == "mapleft") { initialize("mapright"); } else if (setmap == "mapright") { initialize("mapthree"); } } google.maps.event.adddomlistener(window, 'load', function() { initialize("mapleft") }); // function iterate on markersdata array // creating markers createmarker function function displaymarkers(setmap) { var markersdata; var map; if (setmap == "mapleft") { markersdata = markersdataleft; map = mapleft; } else if (setmap == "mapright") { markersdata = markersdataright; map = mapright; } else { markersdata = markersdatathree; map = mapthree; } // variable sets map bounds according markers position var bounds = new google.maps.latlngbounds(); // loop traverses markersdata array calling createmarker function each marker (var = 0; < 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 added bounds variable bounds.extend(latlng); } // bounds variable used set map bounds // fitbounds() function map.fitbounds(bounds); } // function creates each marker , sets info window content function createmarker(setmap, latlng, name, address1, address2, postalcode) { var map; var infowindow; if (setmap == "mapleft") { map = mapleft; infowindow = infowindowleft; } else if (setmap == "mapright") { map = mapright; infowindow = infowindowright; } else { map = mapthree; infowindow = infowindowthree; } var marker = new google.maps.marker({ map: map, position: latlng, title: name }); // event expects click on marker // when event fired info window content created // , info window opened. google.maps.event.addlistener(marker, 'click', function() { // creating content inserted in 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 info window. infowindow.setcontent(iwcontent); // opening info window in current map , @ current marker location. infowindow.open(map, marker); }); }html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } .container { width: 100%; display: flex; } #map-canvas-left, #map-canvas-right, #map-canvas-three { height: 250px; width: 550px; } #iw_container .iw_title { font-size: 16px; font-weight: bold; } .iw_content { padding: 15px 15px 15px 0; }<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> <div class="container"> <div id="map-canvas-left"></div> <div id="map-canvas-right"></div> <div id="map-canvas-three"></div> </div>
Comments
Post a Comment