google maps auto open infoWindow

Question

I\'m having a problem getting info windows on my google map to auto open I have followed a tutorial here...

https://www.taniarascia.com/google-maps-apis-for-multiple-loc

Answer 1

Related question (closed): Show all infowindows open

If you want to have more than one InfoWindow open at a time you need to create one for each marker (assuming you want them open on all the markers, if you only ever want three, then only create three).

code snippet using a createMarker function to get closure on the marker/infowindow:

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<div id="map"></div>
<script>
  var map;

  function initMap() {

    var scorrier = {
      info: '<center><img src="assets/images/ge-logo-300px.jpg"><br><br>\
                    <strong>The Great Estate</strong><br>\
                    Scorrier House<br>Cornwall, TR16 5AU<br>\
                    <strong><a href="https://www.google.co.uk/maps/dir/Bristol/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.8495256,-5.0243318,8z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x4871836681b3d861:0x8ee4b22e4b9ad71f!2m2!1d-2.58791!2d51.454513!1m5!1m1!1s0x486b18b9cffffd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818" target="_blank" style="color:red">Directions to The Great Estate</a></center></strong>',
      lat: 50.2501818,
      long: -5.1924054
    };

    var redruth = {
      info: '<strong>Redruth Train Station</strong><br>\
                    Redruth<br>Cornwall, TR15 2AB<br>\
                    <strong><a href="https://www.google.co.uk/maps/dir/TR15+2AB,+Station+Rd,+Redruth/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.2428949,-5.2183829,15z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x486b1f5fb5f4a7ed:0xfa94523df7169fe6!2m2!1d-5.2258756!2d50.2332886!1m5!1m1!1s0x486b18b9cffffd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818?shorturl=1" target="_blank" style="color:red">Directions to The Great Estate</a></strong>',
      lat: 50.233210,
      long: -5.225936
    };

    var truro = {
      info: '<strong>Truro Train Station</strong><br>\r\
                    Station Road, Truro<br> Cornwall, TR1 3HH<br>\
                    <strong><a href="https://www.google.co.uk/maps/dir/Truro,+Station+Road,+Truro,+Cornwall+TR1+3HH/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.2646882,-5.1661898,13z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x486b17b40079af5d:0x9752f63a0a1484f8!2m2!1d-5.0641465!2d50.2640872!1m5!1m1!1s0x486b18b9cffffd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818?shorturl=1" target="_blank" style="color:red">Directions to The Great Estate</a></strong>',
      lat: 50.264087,
      long: -5.064146
    };

    var locations = [
      [scorrier.info, scorrier.lat, scorrier.long, 0],
      [redruth.info, redruth.lat, redruth.long, 1],
      [truro.info, truro.lat, truro.long, 2],
    ];

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      scrollwheel: false,
      gestureHandling: 'cooperative',
      center: new google.maps.LatLng(50.2501818, -5.1924054),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var marker, i;

    for (i = 0; i < locations.length; i++) {
      createMarker(locations[i]);
    }
  }

  function createMarker(location) {
    var infowindow = new google.maps.InfoWindow({
      disableAutoPan: true
    });
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(location[1], location[2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', function(evt) {
      infowindow.setContent(location[0]);
      infowindow.open(map, marker);
    });
    google.maps.event.trigger(marker, 'click');
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>