单击标记时显示信息窗口

Question

I would like to use an info window for my map.

When I run this code, the info window is not appearing. I want it to appear when I click on the marker.

<div id="map" style="width:100%;height:320px"></div>
<script>
    function myMap() {
      var mapCanvas = document.getElementById("map");
      var mapOptions = {
        center: new google.maps.LatLng(47.3921611, 8.4957963),
        zoom: 14
      }

      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+
          '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      var map = new google.maps.Map(mapCanvas, mapOptions);
      var image = '<?php echo bloginfo("url") ?>/G_marker.png';
      var beachMarker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        icon: image,
      });
    }
    marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    google.maps.event.addDomListener(window, 'load', myMap);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTzoFPuiNSd_JH_jGT7Pq_KMM7XoV2PMM&callback=myMap"></script>

I actually copied the InfoWindow part and pasted it to my code but I still don't understand why it is not working. How can I fix this?

Answer 1

I get a javascript error with the posted code: Uncaught ReferenceError: marker is not defined . Your code calls that variable beachMarker , and the click listener should be set up inside the myMap (initialize) function (in the scope where that variable exists).

working fiddle

code snippet:

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <div id="map" style="width:100%;height:320px"></div> <script> function myMap() { var mapCanvas = document.getElementById("map"); var mapOptions = { center: new google.maps.LatLng(47.3921611, 8.4957963), zoom: 14 } var contentString = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 'sandstone rock formation in the southern part of the ' + 'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' + 'south west of the nearest large town, Alice Springs; 450&#160;km ' + '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' + 'features of the Uluru - Kata Tjuta National Park. Uluru is ' + 'sacred to the Pitjantjatjara and Yankunytjatjara, the ' + 'Aboriginal people of the area. It has many springs, waterholes, ' + 'rock caves and ancient paintings. Uluru is listed as a World ' + 'Heritage Site.</p>' + '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + 'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' + '(last visited June 22, 2009).</p>' + '</div>' + '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var map = new google.maps.Map(mapCanvas, mapOptions); var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; var beachMarker = new google.maps.Marker({ position: map.getCenter(), map: map, icon: image, }); beachMarker.addListener('click', function() { infowindow.open(map, beachMarker); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Answer 2

You created "beachMarker" variable and then uses "marker" :P

Try use:

beachMarker.addListener('click', function() {
        infowindow.open(map, beachMarker);
    });