Google maps open info window by default?

Question

The following example shows a simple Marker (standard icon) on Google maps for the location and when clicking the icon, it opens the info window. Can I show the info window open by default so that I don't need to click the icon to open?

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"Uluru (Ayers Rock)"
    });

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });

Answer 1

If you want to show the info window opened by default without click, just add a new code like bellow:

Your code:

google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
});

So we have a new code like this:

google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
});

infowindow.open(map,marker);

As you can see, we just add a little line code with infowindow.open(map,marker);

Answer 2

You can run "open" directly on page load should open the window automatically, without a click.

infowindow.open(map, marker);

However, this might not autopan the map properly in some cases, leaving the top of the overlay off the edge of the map.

A way that worked for me is to wrap it in a listener to the "tilesloaded" event on the map

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
  infowindow.open(map, marker);
});

Answer 3

The code above works perfectly. However, the my map didnt shift around so that the infowindow was being fully shown. Instead, the pushpin stayed in the middle.

So how do you make the map adjust itself so the info window is fully viewable? Read this: Google Maps : auto center map on marker click

If you want the pushpin to stay where it is and not shift the map, read this: Google Maps: How to prevent InfoWindow from shifting the map

Hope that helps people take the next step

Answer 4

Below Code Is working fine for me:

Change latitude, longitude, Content and mapid (with your custom div id):

<script type="text/javascript">

function initialize() {
    var myLatlng = new google.maps.LatLng(48.206615,13.487928);
    var mapOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var contentString = '<p><strong>Bahnhofstraße 32</strong></p><p>Bahnhofstraße 32, 4910 Ried im</p><p>Innkreis, Austria</p>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString
  });


    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Bahnhofstraße 32'
    });

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
  // show map, open infoBox 
        google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
          infowindow.open(map, marker);
        });

}

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

    </script>