How can you show Google Maps InfoWindows OnLoad of the document? Everything works perfect. The InfoWindow pops up on click but I am not 100% sure how to solve the problem, that it shows up on load...

Please find my code below:

    <script type="text/javascript">
        var infowindow = null;

        $(document).ready(function() {
            initialize();
        });

        function initialize() {
            var centerMap = new google.maps.LatLng(52, 10);

            var myOptions = {
                zoom: 5,
                center: centerMap,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

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

            setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
                content: "loading...",
                maxWidth: 60
            });

            var bikeLayer = new google.maps.BicyclingLayer();
            bikeLayer.setMap(map);
        }

        var sites = [
            // array here
        ];

        function setMarkers(map, markers) {
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                var marker = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4]
                });

                var contentString = "Google Maps";

                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
    </script>

How can you show Google Maps InfoWindows OnLoad of the document? Everything works perfect. The InfoWindow pops up on click but I am not 100% sure how to solve the problem, that it shows up on load...

Please find my code below:

    <script type="text/javascript">
        var infowindow = null;

        $(document).ready(function() {
            initialize();
        });

        function initialize() {
            var centerMap = new google.maps.LatLng(52, 10);

            var myOptions = {
                zoom: 5,
                center: centerMap,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

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

            setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
                content: "loading...",
                maxWidth: 60
            });

            var bikeLayer = new google.maps.BicyclingLayer();
            bikeLayer.setMap(map);
        }

        var sites = [
            // array here
        ];

        function setMarkers(map, markers) {
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                var marker = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4]
                });

                var contentString = "Google Maps";

                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
    </script>

• javascript
• google-maps

Share Improve this question Follow asked Apr 22, 2015 at 11:23 MaxiMaxi 12311 gold badge22 silver badges88 bronze badges 5

• 1 trigger marker click :3 – HoangHieu Commented Apr 22, 2015 at 11:38
• 1 flow answer stackoverflow./questions/28497023/… – HoangHieu Commented Apr 22, 2015 at 11:42
• 1 Call infowindow.open to open the infowindow while loading, and the close it when you are done. – brenzy Commented Apr 22, 2015 at 11:47
• Can anybody please provide an working example for the code above? – Maxi Commented Apr 22, 2015 at 12:01
• Which infowindow did you want opened on load? – geocodezip Commented Apr 22, 2015 at 13:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use a separate info window for each marker, and you can open them all. Please see the code snippet for more details:

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #maps {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis./maps/api/js?v=3.exp"></script>
  <script>
    var infowindow = null;
    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
      var centerMap = new google.maps.LatLng(52, 10);
      var myOptions = {
        zoom: 5,
        center: centerMap,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

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

      setMarkers(map, sites);

      var bikeLayer = new google.maps.BicyclingLayer();
      bikeLayer.setMap(map);
    }

    var sites = [
      ["this is a title", 52, 10, 10, "<div>This is the first site</div>"]
    ];

    function setMarkers(map, markers) {
      for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
          position: siteLatLng,
          map: map,
          title: sites[0],
          zIndex: sites[3],
          html: sites[4]
        });
        var infowindow = new google.maps.InfoWindow({
          content: sites[4],
          maxWidth: 60
        });
        infowindow.open(map, marker);

        google.maps.event.addListener(marker, "click", function() {
          infowindow.setContent(this.html);
          infowindow.open(map, this);
        });
      }
    }
  </script>
</head>

<body>
  <div id="maps"></div>
</body>

</html>

I have a tip for your question. this is click to marker by code javascript with function trigger after map loaded.

example

google.maps.event.trigger(marker, 'click');

<script>
$(document).ready(function(){
       google.maps.event.trigger(marker, 'click'); //with marker is global validate
});
</scrip>

UPDATE, if you have a marker, when initialize(); called google.maps.event.trigger(marker, 'click'); add it after initialize(); //How to declare marker to global

<script type="text/javascript">
        var infowindow = null;
        var marker = null; //declare marker to global
        ...
</script>

UPDATE, if you have markers with code add markers :) you change to

var _markers = [];
function setMarkers(map, markers) {
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                _markers[i] = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4]
                });

                var contentString = "Google Maps";

                google.maps.event.addListener(_markers[i], "click", function () {                    
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
        $(document).ready(function() {
            initialize();
            for(var i = 0, count = _markers.length; i<count; i++){
               google.maps.event.trigger(_markers[i], 'click');
            }
        });

flow this question to view full example with trigger click

Trigger a click event on a Google Map Marker by clicking on a button and a seperate JS file with jQuery

with handle event map loaded, you can use titleloaded event

google.maps.event.addListener(map, 'tilesloaded', function() {
  // Visible tiles loaded!
});

You are calling InfoWindow.open() method inside your click event. To open the info window onLoad you have to call it inside the initialize function. Or you can add it inside addDomListener(). Refer: Same kind of discussion