Google Maps Array上的多个infowindows

时间:2018-03-11 19:27:50

标签: javascript google-maps google-maps-api-3

(PS-是的,我查看了这个相关的stackoverflow和this blog并没有解决我的问题,也许我在其他地方犯了一些明显的错误?)

我正试图在我的谷歌地图上显示多个不同的信息窗口。当我的听众设置为:

google.maps.event.addListener(marker, 'click', function() {
         infoWindow.setContent( this.html );
         infoWindow.open( map, this );
});

然后,infowindows会为所有标记弹出完全空白。

当我的听众设置为:

google.maps.event.addListener(marker, 'click', function() {
         infoWindow.open( map, this );
});

然后infowindows弹出标题,但它只是每个数组中显示所有标记的最后一个标题。

以下是我的谷歌地图javascript代码的总体情况:

      function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.6895, lng: 139.6917},
          zoom: 13,
          mapTypeId: 'roadmap'
        });  

       // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        /*var markers = [];*/
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
        
    setMarkers(map, food);
    setMarkers(map, views);    
}    
    
    
var views = [
//Tokyo     
  ['Tokyu Plaza Omotesando Harajuku', 35.66871, 139.70598, 0],
  ['Shinjuku', 35.69384, 139.70354, 0],
  ['Robot Restaurant', 35.69431, 139.70284, 0],
  ['Shinjuku Crossing Intersection', 35.65945, 139.70061, 0],
  ['Starbucks Tokyu Plaza', 35.66886, 139.70603, 0]     
];          
    
var food = [
//Tokyo    
  ['2Chome Tsukemen Gachi', 35.69126, 139.70853, 1],
  ['Tsukiji Fish Market', 35.66548, 139.77066, 1],
  ['Tonkatsu Tonki', 35.6336, 139.71429, 1],
];

function setMarkers(map, locations) {
  // Add markers to the map
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var locale = locations[i];
    var myLatLng = new google.maps.LatLng(locale[1], locale[2]);
    var icon_to_use;
    var infowindow = null;  
    if(locale[3] < 1 ){
      icon_to_use = new google.maps.MarkerImage('img/views.png', new google.maps.Size(40, 40), new google.maps.Point(0,0), new google.maps.Point(0, 32));
    }
      else {
      icon_to_use = new google.maps.MarkerImage('img/food.png', new google.maps.Size(40, 40), new google.maps.Point(0,0), new google.maps.Point(0, 32));
    }
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: icon_to_use,
        info: locale[0],
        shape: shape,
        zIndex: locale[3] //someday I will tie this zIndex to how a place is ranked//    
    }); 
     infoWindow = new google.maps.InfoWindow({
            content: locale[0]
    });
     google.maps.event.addListener(marker, 'click', function() {
         infoWindow.setContent( this.html );
         infoWindow.open( map, this );
    });  
  }
}

如何在各自的信息窗口中显示独特的标题?

1 个答案:

答案 0 :(得分:1)

您的标记没有html属性,因此不会在InfoWindow中设置任何内容:

 google.maps.event.addListener(marker, 'click', function() {
     infoWindow.setContent( this.html );
     infoWindow.open( map, this );
});  

使用info属性(这是您想要的),或将其重命名为html

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: icon_to_use,
  info: locale[0]
});

 google.maps.event.addListener(marker, 'click', function() {
     infoWindow.setContent( this.info);
     infoWindow.open( map, this );
});  

proof of concept fiddle

代码段

&#13;
&#13;
function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 35.6895,
      lng: 139.6917
    },
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  // create the shared InfoWindow
  infoWindow = new google.maps.InfoWindow();
  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });

  setMarkers(map, food);
  setMarkers(map, views);
}


var views = [
  //Tokyo     
  ['Tokyu Plaza Omotesando Harajuku', 35.66871, 139.70598, 0],
  ['Shinjuku', 35.69384, 139.70354, 0],
  ['Robot Restaurant', 35.69431, 139.70284, 0],
  ['Shinjuku Crossing Intersection', 35.65945, 139.70061, 0],
  ['Starbucks Tokyu Plaza', 35.66886, 139.70603, 0]
];

var food = [
  //Tokyo    
  ['2Chome Tsukemen Gachi', 35.69126, 139.70853, 1],
  ['Tsukiji Fish Market', 35.66548, 139.77066, 1],
  ['Tonkatsu Tonki', 35.6336, 139.71429, 1],
];

function setMarkers(map, locations) {
  // Add markers to the map
  for (var i = 0; i < locations.length; i++) {
    var locale = locations[i];
    var myLatLng = new google.maps.LatLng(locale[1], locale[2]);
    var icon_to_use;
    var infowindow = null;
    if (locale[3] < 1) {
      icon_to_use = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
    } else {
      icon_to_use = 'http://maps.google.com/mapfiles/ms/micons/green.png';
    }
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: icon_to_use,
      info: locale[0],
    });

    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(this.info);
      infoWindow.open(map, this);
    });
  }
}
google.maps.event.addDomListener(window, "load", initAutocomplete);
&#13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<input id="pac-input" />
<div id="map"></div>
&#13;
&#13;
&#13;