How can I open info box of specific marker automat

Question

I want to open an info box of a marker automatically by given marker's id.

//Data of markers are from JSON
var markers = new google.maps.Marker({
      id: place.id,
      map: map,
      title:place.title,
      icon : 'assets/frontend/images/marker.png'
    });
infoWindow = new google.maps.InfoWindow();
infoWindow.open(map, markers);

For example, Assuming that I want to open info box of marker that has id = 243

var marker_id = 243;

Answer 1

You can use google-maps-utility-library-v3 for infobox, modify your code as following, if you have multiple markers and need multiple info box according to the markers, you can repeat the code for the infobox, first try for a single marker and you can have idea.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script language="javascript">
//Data of markers are from JSON
$(document).ready(function(){   
            /*Your map code needs to be here*/
            /*Marker being created below*/
    var markers = new google.maps.Marker({
          id: place.id,
          map: map,
          title:place.title,
          icon : 'assets/frontend/images/marker.png'
        });

    var boxText = document.createElement("div");
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
      boxText.innerHTML = "Your map info here";
      var myOptions_txtbox = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-140, 0)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('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
            };
            /*Text box being created for marker `markers` */
    var infobox_new = new InfoBox(myOptions_txtbox);
            /*Created text box is assigned for marker `markers`. You can assign any event. For now, I have selected on `click` */
    google.maps.event.addListener(markers, "click", function (e) {
        infobox_new.open(map, this);
    });
});
    </script>