Open google infobox from external link

Question

This is my example code. I want to open the infobox when the link is clicked.

example jsfiddle

code snippet:

function initialize() {
  var loc, map, marker, infobox;

  loc = new google.maps.LatLng(-33.890542, 151.274856);

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: loc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
  });

  infobox = new InfoBox({
    content: document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
      opacity: 0.75,
      width: "280px"
    },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
  });

  google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

.infobox-wrapper {
  display: none;
}
#infobox {
  border: 2px solid black;
  margin-top: 8px;
  background: #333;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: .5em 1em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 -1px #000000;
  -webkit-box-shadow: 0 0 8px #000;
  box-shadow: 0 0 8px #000;
}

<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map" style="width: 100%; height: 300px"></div>
<br>

<a href="">Open Infobox</a>

<div class="infobox-wrapper">
  <div id="infobox">
    The contents of your info box. It's very easy to create and customize.
  </div>
</div>

Answer 1

One option is to trigger a click event on the marker. To do that (use it in an HTML click event) the marker needs to be in the global scope (outside of any function definition)

Another option would be to use the google.maps.event.addDomListener on the DOM object, but it would have to have an id or some way to get a reference to it.

var marker; // in global scope
function initialize() {
  // these are local to the initialize function
  var loc, map, infobox;

  loc = new google.maps.LatLng(-33.890542, 151.274856);

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: loc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
  });

  infobox = new InfoBox({
    content: document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
      opacity: 0.75,
      width: "280px"
    },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
  });

  google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

.infobox-wrapper {
  display: none;
}
#infobox {
  border: 2px solid black;
  margin-top: 8px;
  background: #333;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: .5em 1em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 -1px #000000;
  -webkit-box-shadow: 0 0 8px #000;
  box-shadow: 0 0 8px #000;
}

<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map" style="width: 100%; height: 300px"></div>
<br>

<!-- trigger the marker click event -->
<a href="javascript:google.maps.event.trigger(marker,'click'); ">Open Infobox</a> 

<div class="infobox-wrapper">
  <div id="infobox">
    The contents of your info box. It's very easy to create and customize.
  </div>
</div>