Edit InfoWindow on a Marker in Google Maps


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!

Ryan

Author of scripteverything.com, Ryan has been dabbling in code since the late '90s when he cut his teeth by exploring VBA in Excel when trying to do something more. Having his eyes opened with the potential of automating repetitive tasks, he expanded to Python and then moved over to scripting languages such as HTML, CSS, Javascript and PHP. When he is not behind a screen, Ryan enjoys a good bush walk with the family during the cooler months, and going with them to the beach during the warmer months.

Recent Posts