-1
私は2つのマーカーグループを持つGoogleマップを持っています。グループA（赤いマーカー）とグループB（紫色のマーカー）と呼ぶことにしましょう。私はこれらの2つのグループのマーカーをオン/オフに切り替えるために私のページにチェックボックスを持っています。私は、と groupAと表示されるミックス（灰色のマーカー）に3番目のマーカーを追加したいと思います。私は明らかに思ったいくつかの変更を試みましたが、この初心者のための運はありません。灰色のマーカーはマップ上にとどまり、GroupAマーカーでオン/オフを切り替えません。私はこれが簡単な修正だと確信しています。何か助けてくれてありがとう！ここでGoogle Maps API Javascript - 1つのマーカーグループに2つの異なるマーカーを切り替える
私が試み変化と私のjavascriptです：
<script>
var markerGroups = {
"GroupA": [],
"GroupB": []
"GroupC": []
};
var customIcons = {
// Maps Icons Collection https://mapicons.mapsmarker.com
GroupA: {
icon: '/icon_red.png'
},
GroupB: {
icon: '/icon_purple.png'
},
GroupC: {
icon: '/icon_grey.png'
}
};
var map;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40.357250, -75.272855),
zoom: 7,
mapTypeId: 'terrain',
gestureHandling: 'greedy',
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
fullscreenControl: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
fullscreenControl: true
});
var infoWindow = new google.maps.InfoWindow();
// downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = parseXml(xmlStr); // data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var type = markers[i].getAttribute("type");
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
markerGroups[type].push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
// });
map.fitBounds(bounds);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
// alert(markerGroups[type][i]);
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
google.maps.event.addDomListener(window, 'load', load);
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
var xmlStr = '<markers><marker name="This is a red marker" address="" lat="" lng="" type="GroupA"/><marker name="This is a purple maker" address="" lat="" lng="" type="GroupB"/><marker name="This is a grey marker " address="" lat="" lng="" type="GroupC"/></markers>';
これはHTMLです：
<input type="checkbox" id="GroupA" onclick="toggleGroup('GroupA', 'GroupC')" CHECKED/>GroupA
<input type="checkbox" id="GroupB" onclick="toggleGroup('GroupB')" CHECKED/>GroupB
<div id="map"></div>
パーフェクト！ありがとうございました！ – dlc3172