次のコードはうまく機能しています。データベースから XML データをインポートし、数値とプロット マップ マーカー、サイドバーを読み込みます。
おすすめのカテゴリで結果をフィルタリングしています。この関数は、html のラジオ ボタンをクリックすると起動します。
<input type="checkbox" id="featuredbox" onclick="boxclick(this,'featured')" />
この部分はうまく機能します。ラジオ ボタンを切り替えると、適切なマップ マーカーのオンとオフが切り替えられます。
私の問題は、サイドバーがそれに応じて更新されないことです。次の例からここまで作業しました：http://www.geocodezip.com/v3_MW_example_categories.html
ここにすべての私のコードがあります:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/gmap_markerwithlabel.js"></script>
<script type="text/javascript">
//<![CDATA[
google.maps.visualRefresh = true;
var map = null;
var markers = [];
var infoWindow;
var myCenter=new google.maps.LatLng(<?=$gmap_center_point?>);
<!-- This function creates marker and populates the infobubble -->
function createMarker(latlng, name, address, profile_link, number_count, distance, featured, coupons, youtube_activate, additional_photo, logo, account_priority) {
var html = "<b>" + name + "</b> <br/>" + address + "<br/><font color=\"red\">Approx. " + distance.toFixed(1) + " miles away</font><br/>"
<!-- html += '<a class="menu" href="javascript: map.setZoom('+zoom+');">Zoom To</a>'; -->
<!-- html += ' <a class="menu" href="javascript:function togglestreetview();">Street View</a>'; -->
<!-- html += ' | '; -->
html += ' <a class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+2);">Zoom In</a>';
html += ' | ';
html += ' <a class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-2);">Out </a>';
html += '<br/>'+ profile_link ;
var marker = new MarkerWithLabel({
map: map,
position: latlng,
animation: google.maps.Animation.DROP,
<!-- Label Options Reference http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/examples/-->
labelContent: number_count,
labelAnchor: new google.maps.Point(8, 36),
labelClass: "gmap_labels", // the CSS class for the label
labelInBackground: false
});
marker.featured = featured;
marker.coupon = coupons;
marker.youtube = youtube_activate;
marker.photo = additional_photo;
marker.name = name;
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show_type(option) {
for (var i=0; i<markers.length; i++) {
if (markers[i].featured == 1){
markers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(option+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide_type(option) {
for (var i=0; i<markers.length; i++) {
if (markers[i].featured == 1) {
markers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(option+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infoWindow.close( );
}
// == a checkbox has been clicked ==
function boxclick(box,option) {
if (box.checked) {
show_type(option);
} else {
hide_type(option);
}
// == rebuild the side bar
createSidebarEntry(name, address, distance, num, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count);
}
<!-- This function . . . -->
function createSidebarEntry(name, address, distance, num, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count) {
var html = ' ';
html += '<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\"><tr><td width=\"20px\" valign=\"top\" align=\"right\">'
html += '<span style=\"padding: 3px; background-color: #F30; color: #FFF; font-weight: bold; font-size: 24px; font-family: Arial, Helvetica, sans-serif;\"> '+ number_count + ' </td>'
html += '<td >'
if (featured==1){
html += '<img src=\"images/_icon_banner_featured.png\" width=\"180\" height=\"19\" /><br/>'
}else{ }
html += '<b>' + name + '</b><br/>'
html += '<font color=\"red\" size=\"1\" >Approx. ' + distance.toFixed(1) + ' miles away.</font><br/>'
html += address + '<br/>'
if (coupons==1 || youtube_activate==1 || additional_photo==1){
html +='<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>'
if (coupons ==1){
html +='<td align=\"left\"><img src=\"images/_icon_results_coupons.png\" width=\"30\" height=\"30\" alt=\"Coupons Available\" />'
}else{ }
if (youtube_activate ==1){
html +='<img src=\"images/_icon_results_youtube.png\" width=\"30\" height=\"30\" alt=\"Videos Available\"/>'
}else{ }
if (additional_photo==1){
html +='<img src=\"images/_icon_results_photo.png\" width=\"30\" height=\"30\" alt=\"Photos Available\"/>'
}else{ }
html +='</td></tr></table>'
}else{ }
html +='</td></tr></table>';
var div = document.createElement("div");
div.value = num;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
sidebar.appendChild(div);
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(markers[num], 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div ;
}
<!-- This function does the Search based on AddressInput -->
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
<!-- FUNCTION -->
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
}
<!-- This function queries the Processing File based on criteria set... radius... search term. etc.-->
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchrequest = document.getElementById('search').value;
var searchUrl = 'search_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&searchrequest=' + searchrequest;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markerNodes.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setZoom(6);
map.setCenter(new google.maps.LatLng(<?=$gmap_center_point?>));
return;
}
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
<!-- GRAB THE VARIABLES ATTRIBUTES FROM PROCESSING FILE AND ASSIGN VARS TO EACH RESULT RETURNED -->
var v_id = markerNodes[i].getAttribute("v_id");
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var profile_link = markerNodes[i].getAttribute("profile_link");
var featured = markerNodes[i].getAttribute("featured");
var coupons = markerNodes[i].getAttribute("coupons");
var youtube_activate = markerNodes[i].getAttribute("youtube_activate");
var additional_photo = markerNodes[i].getAttribute("additional_photo");
var category_id = markerNodes[i].getAttribute("category_id");
var category_name = markerNodes[i].getAttribute("category_name");
var sub_cat_id = markerNodes[i].getAttribute("sub_cat_id");
var sub_cat_name = markerNodes[i].getAttribute("sub_cat_name");
var account_priority = markerNodes[i].getAttribute("account_priority");
var logo = markerNodes[i].getAttribute("logo");
var number_count = markerNodes[i].getAttribute("number_count");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createSidebarEntry(name, address, distance, i, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count, account_priority);
createMarker(latlng, name, address, profile_link, number_count, distance, featured, coupons, youtube_activate, additional_photo, logo, account_priority);
bounds.extend(latlng);
}
// == show or hide the categories initially ==
show_type("featured");
// == create the initial sidebar ==
map.fitBounds(bounds);
filtering.style.visibility = "visible";
});
}
<!-- FUNCTION -->
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?=$gmap_center_point?>),
zoom: 10,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
});
infoWindow = new google.maps.InfoWindow();
<!-- STICK A CUSTOM PIN IN CENTER LOCATION -->
var center_marker=new google.maps.Marker({
map:map,
position:myCenter,
clickable: true,
icon:'/images/GHV_map_marker.png'
});
center_marker.info = new google.maps.InfoWindow({
content: 'My Location'
});
google.maps.event.addListener(center_marker, 'click', function() {
center_marker.info.open(map, center_marker);
});
center_marker.setMap(map);
<!-- THIS FUNCTION LAUNCHES ONLY AFTER FULL PAGE IS LOADED AND RUNS SEARCHLOCATIONS WITH SET VARIABLE -->
google.maps.event.addListenerOnce(map, 'idle', function () {
searchLocations(<?=$gmap_center_point?>);
});
}
<!-- This function . . . -->
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
<!-- This function . . . -->
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
<!-- This function . . . -->
function doNothing() {}
//]]>
</script>