How to keep atleast one map infobox opened

Question

I found a working code for Google map infobox here (from user geocodezip)

But the code donot allow the first or provided array index infobox to be opened when the page is loaded . Could someone assist me in this?

Here is working prototype https://jsfiddle.net/vkuu27v9/5/

  var ib = new InfoBox();

function initialize() {

var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(52.204872,0.120163),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
//  styles: styles,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

    google.maps.event.addListener(map, "click", function() { ib.close() });

setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
    content: "loading..."

});
}

var sites = [
 ['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600 <br/> <a href="http://www.frontroomcambridge.com/">Website</a></p>'],
 ['Fitzwilliam Museum',52.199678,0.119931, 2, '<p>Fitzwilliam Museum <br/>Trumpington St, Cambridge, CB2 1RB <br/>01223 332900 <br/> <a href="http://www.fitzmuseum.cam.ac.uk/">Website</a></p>'],
 ['Wysing Arts centre', 52.182077,-0.06977, 3, '<p>Wysing Arts Centre <br/>Fox Rd, Cambridge CB23 2TX <br/>01954 718881 <br/> <a href="http://www.wysingartscentre.org/">Website</a></p>'],
 ['Cambridge School of Art', 52.203825,0.134808, 4, '<p>Cambridge School of Art <br/>East Rd, Cambridge, CB1 1PT <br/>0845 271 3333 <br/> <a href="http://www.cambridgeschoolofart.com/">Website</a></p>'],
 ['Kettles yard', 52.210851,0.114637, 5, '<p>Kettles Yard <br/> Castle St, Cambridge, CB3 0AQ <br/>01223 748100 <br/> <a href="http://www.kettlesyard.co.uk/">Website</a></p>'],
 ['Aid & Abet', 52.195218,0.136578, 7, '<p>Aid & Abet <br/>Station Road, Cambridge, CB1 2JW <br/> <a href="http://aidandabet.co.uk/">Website</a></p>'],
 ['The Junction', 52.190756,0.136522, 8, '<p>The Junction <br/>Clifton Way, Cambridge, CB1 7GX <br/>01223 511 511 <br/> <a href="http://www.junction.co.uk/">Website</a></p>']
];

/* var sites = [
    // List all locations for each pin
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom. <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600</p>']
];
*/

function createMarker(site, map){
    var siteLatLng = new google.maps.LatLng(site[1], site[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: site[0],
        zIndex: site[3],
        html: site[4] /* ,
        icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png" this icon no longer available */
    });
    // Begin example code to get custom infobox
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = marker.html;

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };
    // end example code for custom infobox

    google.maps.event.addListener(marker, "click", function (e) {
     ib.close();
     ib.setOptions(myOptions);
     ib.open(map, this);
    });
    return marker;
}

function setMarkers(map, markers) {

 for (var i = 0; i < markers.length; i++) {
   createMarker(markers[i], map);
 }
}


   google.maps.event.addDomListener(window, 'load', initialize);

#map_canvas {
  margin: 0;
  padding: 0;
  height: 500px;
  width:100%;
}

   <div id="map_canvas"></div>
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>

Please provide a [mcve] that demonstrates the issue (in the question itself). — geocodezip, Dec 29 '16 at 23:57

geocodezip · Accepted Answer · 2021-04-07T12:20:07.117

add an array to keep references to all the markers:

var markers = [];

push each marker on that array as it is created (add this line in the createMarker function:

markers.push(marker);

in the initialize function, after creating all the markers, trigger a 'click' event on the one you want opened initially:

// open first marker's infowindow
google.maps.event.trigger(markers[0], 'click');

proof of concept fiddle

code snippet:

#map_canvas {
  margin: 0;
  padding: 0;
  height: 500px;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/archive/infobox/src/infobox.js"></script>

<div id="map_canvas"></div>
<script>
  var ib = new InfoBox();
  var markers = [];

  function initialize() {

    var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(52.204872, 0.120163),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      //  styles: styles,
      scrollwheel: false
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    google.maps.event.addListener(map, "click", function() {
      ib.close()
    });

    setMarkers(map, sites);
    // open first marker's infowindow
    google.maps.event.trigger(markers[0], 'click');

    infowindow = new google.maps.InfoWindow({
      content: "loading..."

    });
  }

  var sites = [
    ['The Frontroom', 52.202977, 0.138938, 1, '<p>The Frontroom <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600 <br/> <a href="http://www.frontroomcambridge.com/">Website</a></p>'],
    ['Fitzwilliam Museum', 52.199678, 0.119931, 2, '<p>Fitzwilliam Museum <br/>Trumpington St, Cambridge, CB2 1RB <br/>01223 332900 <br/> <a href="http://www.fitzmuseum.cam.ac.uk/">Website</a></p>'],
    ['Wysing Arts centre', 52.182077, -0.06977, 3, '<p>Wysing Arts Centre <br/>Fox Rd, Cambridge CB23 2TX <br/>01954 718881 <br/> <a href="http://www.wysingartscentre.org/">Website</a></p>'],
    ['Cambridge School of Art', 52.203825, 0.134808, 4, '<p>Cambridge School of Art <br/>East Rd, Cambridge, CB1 1PT <br/>0845 271 3333 <br/> <a href="http://www.cambridgeschoolofart.com/">Website</a></p>'],
    ['Kettles yard', 52.210851, 0.114637, 5, '<p>Kettles Yard <br/> Castle St, Cambridge, CB3 0AQ <br/>01223 748100 <br/> <a href="http://www.kettlesyard.co.uk/">Website</a></p>'],
    ['Aid & Abet', 52.195218, 0.136578, 7, '<p>Aid & Abet <br/>Station Road, Cambridge, CB1 2JW <br/> <a href="http://aidandabet.co.uk/">Website</a></p>'],
    ['The Junction', 52.190756, 0.136522, 8, '<p>The Junction <br/>Clifton Way, Cambridge, CB1 7GX <br/>01223 511 511 <br/> <a href="http://www.junction.co.uk/">Website</a></p>']
  ];

  /* var sites = [
      // List all locations for each pin
  ['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom. <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600</p>']
  ];
  */

  function createMarker(site, map) {
    var siteLatLng = new google.maps.LatLng(site[1], site[2]);
    var marker = new google.maps.Marker({
      position: siteLatLng,
      map: map,
      title: site[0],
      zIndex: site[3],
      html: site[4]
    });
    markers.push(marker);
    // Begin example code to get custom infobox
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = marker.html;

    var myOptions = {
      content: boxText,
      disableAutoPan: false,
      maxWidth: 0,
      pixelOffset: new google.maps.Size(-140, 0),
      zIndex: null,
      boxStyle: {
        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat",
        opacity: 0.75,
        width: "280px"
      },
      closeBoxMargin: "10px 2px 2px 2px",
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
      infoBoxClearance: new google.maps.Size(1, 1),
      isHidden: false,
      pane: "floatPane",
      enableEventPropagation: false
    };
    // end example code for custom infobox

    google.maps.event.addListener(marker, "click", function(e) {
      ib.close();
      ib.setOptions(myOptions);
      ib.open(map, this);
    });
    return marker;
  }

  function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
      createMarker(markers[i], map);
    }
  }


  google.maps.event.addDomListener(window, 'load', initialize);
</script>

How to keep atleast one map infobox opened

1 Answers1

Linked