Google地圖位置數組的特定標記| 的JavaScript

Question

我正在使用Google API設置地圖，用戶可以在其中選擇某些類型的地點，例如周圍地區的商店，公園，銀行等。

那部分沒問題，但是現在我希望每個單獨的選項都有不同的標記。 就像銀行將有一個標記，而公園將有另一個標記。

現在，他們都使用相同的標記，而我正努力了解如何使用Google Maps API來實現此目的。

到目前為止，這里顯示了我的工作。 http://codepen.io/carteralek/pen/zGmZzw

 var map; var infoWindow; var service; var markersArray = []; var options = ['bank', 'gas_station', 'post_office', 'library', 'police', 'hospital', 'museum', 'movie_theater', 'train_station', 'place_of_worship', 'school', 'grocery_or_supermarket', 'restaurant', 'shopping_center', 'department_store', 'home_goods_store', 'park']; function initialize() { map = new google.maps.Map(document.getElementById('map-canvas'), { center: new google.maps.LatLng(42.494718, -92.346826), zoom: 12, styles: [{ stylers: [{ visibility: 'simplified' }] }, { elementType: 'labels', stylers: [{ visibility: 'off' }] }] }); infoWindow = new google.maps.InfoWindow(); service = new google.maps.places.PlacesService(map); var myLatlng = new google.maps.LatLng(42.494718, -92.346826); var bridgesMark = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapMarker.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: bridgesMark, title: 'Hello World!' }); google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch); } function performSearch() { clearMaps(); var clickedOptions = []; for (var i = 0; i < options.length; i++) { if (document.getElementById(options[i]).checked) { clickedOptions.push(options[i]); } } var request = { bounds: map.getBounds(), types: clickedOptions }; console.log service.radarSearch(request, callback); } function callback(results, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { alert(status); return; } for (var i = 0, result; result = results[i]; i++) { createMarker(result); } } var image1 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/bank.png'; var image2 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/forest.png'; function createMarker(place) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: image1 }); markersArray.push(marker); google.maps.event.addListener(marker, 'click', function() { service.getDetails(place, function(result, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { alert(status); return; } infoWindow.setContent(result.name); infoWindow.open(map, marker); }); }); } for (var i = 0; i < options.length; i++) { document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" onclick="performSearch();"> ' + options[i] + '<br>' } function clearMaps() { for (var i = 0; i < markersArray.length; i++) { markersArray[i].setMap(null); } markersArray.length = 0; } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body { height: 100%; margin: 0; padding: 0; } #map-canvas { height: 70%; margin: 0; padding: 0; } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,visualization"></script> <div id="options"></div> <div id="map-canvas"></div> 

Answer 1

當選擇在地圖上繪制標記時，您需要換出圖標。 只需更改以下內容即可：

var image1 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/bank.png';
var image2 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/forest.png';


// added in new param for iconpath
function createMarker(place, iconpath) {

  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: iconpath // lets use the iconpath

  });

...

並使用crateMarker(..., image1);調用它crateMarker(..., image1);

Answer 2

一種選擇是針對每種類型分別進行搜索，將您喜歡的圖標傳遞給搜索例程。

概念證明

代碼段：

 var map; var infoWindow; var service; var markersArray = []; var options = ['bank', 'gas_station', 'post_office', 'library', 'police', 'hospital', 'museum', 'movie_theater', 'train_station', 'place_of_worship', 'school', 'grocery_or_supermarket', 'restaurant', 'shopping_center', 'department_store', 'home_goods_store', 'park']; function getLetteredIcon(letter) { return "http://www.google.com/mapfiles/marker" + letter + ".png"; } function initialize() { map = new google.maps.Map(document.getElementById('map-canvas'), { center: new google.maps.LatLng(42.494718, -92.346826), zoom: 12, styles: [{ stylers: [{ visibility: 'simplified' }] }, { elementType: 'labels', stylers: [{ visibility: 'off' }] }] }); infoWindow = new google.maps.InfoWindow(); service = new google.maps.places.PlacesService(map); var myLatlng = new google.maps.LatLng(42.494718, -92.346826); var bridgesMark = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapMarker.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: bridgesMark, title: 'Hello World!' }); google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch); for (var i = 0; i < options.length; i++) { document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" onclick="performSearch();"> <img src=' + getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)) + ' height="20" /> ' + options[i] + '<br>'; } } function performSearch() { clearMaps(); var clickedOptions = []; for (var i = 0; i < options.length; i++) { if (document.getElementById(options[i]).checked) { performTypeSearch(options[i], getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i))); } } } function performTypeSearch(type, icon) { var request = { bounds: map.getBounds(), types: [type] }; service.radarSearch(request, function(results, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { alert(type + ":" + status); return; } for (var i = 0, result; result = results[i]; i++) { createMarker(result, icon); } }); } function createMarker(place, icon) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: icon }); markersArray.push(marker); google.maps.event.addListener(marker, 'click', function() { service.getDetails(place, function(result, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { alert(status); return; } infoWindow.setContent(result.name); infoWindow.open(map, marker); }); }); } function clearMaps() { for (var i = 0; i < markersArray.length; i++) { markersArray[i].setMap(null); } markersArray.length = 0; } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body { height: 100%; margin: 0; padding: 0; } #map-canvas { height: 70%; margin: 0; padding: 0; } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,visualization"></script> <div id="options"></div> <div id="map-canvas"></div>