将弹出窗口添加到谷歌地图标记

Question

我一直在按照教程将谷歌地图标记添加到谷歌地图地图，并在它们彼此接近时使用群集。

我有群集工作，但我还想添加不仅仅是弹出窗口的标题。我想添加一个与每个HTML不同的自定义HTML的描述。

HTML：

<select id="type" onchange="filterMarkers(this.value);">
  <option value="">All Markers</option>
  <option value="backpacking">Backpacking</option>
  <option value="hiking">Hiking</option>
  <option value="offRoad">Off Road</option>
</select>

<div id="map-canvas" style="width: 100%; height: 600px"></div>

使用Javascript：

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});
var markerCluster;

// Our markers
markers1 = [
  ['0', 'Tanner Trail Grand Canyon', 36.0326, -111.8525, 'backpacking'],
  ['1', 'Yosemite Snow Shoe Badger Pass', 37.6648, -119.6634, 'backpacking'],
  ['2', 'Kayak Camping Catalina Island', 33.3504, -118.3282, 'backpacking'],
  ['3', 'Mini Trans Catalina Trail', 33.3403, -118.3262, 'backpacking']
];

/**
 * Function to init map
 */

function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }
  markerCluster = new MarkerClusterer(map, gmarkers1, {
    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m'
  });
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });

  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.panTo(this.getPosition());
      //map.setZoom(15);
    }
  })(marker1, content));
}

/**
 * Function to filter markers by category
 */

filterMarkers = function(category) {
  var newmarkers = [];
  for (i = 0; i < markers1.length; i++) {
    marker = gmarkers1[i];
    // If is same category or category not picked
    if (marker.category == category || category.length === 0) {
      marker.setVisible(true);
      newmarkers.push(marker);
    }
    // Categories don't match 
    else {
      marker.setVisible(false);
    }
  }
  markerCluster.clearMarkers();
  markerCluster.addMarkers(newmarkers);
}
google.maps.event.addDomListener(window, "load", initialize);

请查看这个JSfiddle到目前为止我所拥有的：http://jsfiddle.net/seekAdventure/bqcp1vns/24/

Answer 1

您可以使用“InfoWindows”。见：https://developers.google.com/maps/documentation/javascript/infowindows

[编辑]以便更好地阅读我的评论：

// Our markers
markers1 = [
  ['0', 'Tanner Trail Grand Canyon', 36.0326, -111.8525, 'backpacking', '<h1>Some fancy HTML stuff</h1><p>...goes in here</p>'],
];

// [...]

function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  // get html string from marker array:
  var content = marker[5]; 

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });

  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.panTo(this.getPosition());
      //map.setZoom(15);
    }
  })(marker1, content));
}