edit-infowindow-google-maps.md

If you want to embed a Google Map into your website and have a marker with an InfoWindow that you'd like to display once the page loads, you don't have to resort to using jQuery or window.onload events.

The following code alone is a working example for a recent task requirement.

In fact the solution is so simple you just need to add one more line to your initialize function.

Here's a basic sample with the solution:

<!DOCTYPE html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta charset="utf-8">
        <title>InfoWindow Displayed on Window Load</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">            
            function initialize() {
                /**
                 * SETTINGS
                 * 1\. latitude and longitude values, enter them below
                 * 2\. ID name of the element containing the map canvas
                 * 3\. HTML of what you'd like to display in the `InfoWindow`
                 */
                // 1A. Latitude setting
                /** @type {Number} */
                var latitude = -25.4121;
                // 1B. Longitude setting
                /** @type {Number} */
                var longitude = 133.77514;
                // 2\. ID of element containing the map canvas
                var mapDivId = "map_canvas";
                // 3\. HTML of what you want to display in your info content
                /** @type {String} */
                var infoContent = "<h1>Hello world!</h1>";

                var pos = new google.maps.LatLng( latitude, longitude );  
                /** @type {Object} */              
                var settings = {
                    zoom: 4,
                    center: pos,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map( document.getElementById(mapDivId), settings );

                var markerInfo = new google.maps.InfoWindow({
                    content : infoContent
                });

                var marker = new google.maps.Marker({
                    position: pos,
                    map: map
                });

                google.maps.event.addListener( marker, 'click', function() {
                    markerInfo.open( map, marker );
                }); // this creates the listener for popping up the infoWindow
                // and here's where the magic happens... just add this next line and voila!
                google.maps.event.trigger( marker, 'click' );
            }
            google.maps.event.addDomListener( window, 'load', initialize );
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width:960px;height:400px;"></div>
    </body>
</html>

This sample script displays the map marker, and it's InfoWindow with the content you've entered in the infoContent variable.

I love easy solutions!

rs77/edit-infowindow-google-maps.md