Google maps v3 open infowindow on load

Question

I using this technique: http://www.geocodezip.com/v3_MW_example_map2.html

I want to have the first info window open when the map loads.

I also want to be able to center the map when you click a location link.

Can anyone help?

JS:

        // this variable will collect the html which will eventually be placed in the side_bar 
        var side_bar_html = ""; 

        // arrays to hold copies of the markers and html used by the side_bar 
        // because the function closure trick doesnt work there 
        var gmarkers = []; 
        var map = null;

        function initialize() {
          // create the map
          var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(50.822096, -0.375736),
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel:false
          }
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

          // Add markers to the map
          // Set up three markers with info windows 
          // add the points    
          var point = new google.maps.LatLng(50.810438, -0.374925);
          var center = new google.maps.LatLng(50.810438, -0.374925);
          var marker = createMarker(point,"Worthing","<p><b>Worthing</b><br>1-13 Buckingham Road,<br>Worthing,<br>West Sussex,<br>BN11 1TH</p>")

          var point = new google.maps.LatLng(51.497421,-0.141604);
          var center = new google.maps.LatLng(51.497421,-0.141604);
          var marker = createMarker(point,"London","<p><b>London</b><br>Portland House,<br>Bressenden Place,<br>London,<br>SW1E 5RS</p>")

          var point = new google.maps.LatLng(-33.867487,151.20699);
          var center = new google.maps.LatLng(-33.867487,151.20699);
          var marker = createMarker(point,"Sydney","<p><b>Sydney</b><br>Level 1, Cosco House,<br>95-101 Sussex Street,<br>Sydney NSW<br>Australia 2000</p>")

          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;

            $('#side_bar li:first-child').addClass("active");

            $('#side_bar li').click(function(){
                $('#side_bar li').removeClass("active");
                $(this).addClass("active");
            });


        }

        var infowindow = new google.maps.InfoWindow(
          { 
            size: new google.maps.Size(150,50)
          });

        // This function picks up the click and opens the corresponding info window
        function myclick(i) {
          google.maps.event.trigger(gmarkers[i], "click");
        }

        // A function to create the marker and set up the event window function 
        function createMarker(latlng, name, html) {
            var contentString = html;
            var iconBase = '../Themes/FreshEgg/assets/img/';
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                zIndex: Math.round(latlng.lat()*-100000)<<5,
                icon: iconBase + 'map_marker_24x46.png',
                animation: google.maps.Animation.DROP
                });

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

            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
            // save the info we need to use later for the side_bar
            gmarkers.push(marker);
            // add a line to the side_bar html
            side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a></li>';
        }

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

HTML:

    <ul class="list-inline" id="side_bar"></ul>
    <div id="map_canvas"></div>

Answer 1

Add a 4th parameter to your createMarker() function for the default state of markers - createMarker(latlng, name, html, show) - where show will be a boolean variable: true to open on load, false to leave it closed. Then when you call createMarker() in your initialize() method specify true for the marker you want open on load.

Then in createMarker() add a condition that handles this for you - something like:

if (show) {
    google.maps.event.trigger(marker, "click");
    /*if you're going to take this approach, make sure this is triggered after
     *you specify your listener
     *alternately, you can also setContent() and open() your infoWindow here
     */
}

To have the map pan to the center when you click on the marker, you first need to disable the auto panning of the map when an infoWindow is open. This can be done where you set the options for your infoWindow:

var infowindow = new google.maps.InfoWindow(
{ 
    size: new google.maps.Size(150,50),
    disableAutoPan : true
});

Then, in your listener for the click event on the marker add the function to panTo(LatLng) the position of the marker on your map.

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