サイトの 1 つに Google マップを追加しています。ドロップダウン リストに多くの州名があります。それらをクリックすると、マップが適切な場所にパンされます。しかし、マーカー アイコンはマップの中央にありません。1 つの場所を選択すると、選択した場所がマップの中央に来るようにします。選択した場所のマークアップは次のようになります
<div class="state">
<label>Please Select State</label> <br />
<select id="selectState" class="statelist" onchange="changeZoomCenter(this.value,'12');">
</select>
</div>
そして、Googleマップのコードは次のようになります
function changeicons(z){ }
var customIcons = {
restaurant: {
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569',
shadow: 'marker/mm_20_shadow.png'
},
};
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var bounds = new google.maps.LatLngBounds();
var markerArray = [];
function loadMap() {
map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(20.0000, 78.0000),
zoom: 5,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
changeicons(zoomLevel);
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("googlemap/xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var storeid = markers[i].getAttribute("store_id");
//var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons['restaurant'] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
//shadow: icon.shadow,
animation: google.maps.Animation.DROP
});
markerArray.push(marker);
bounds.extend(marker.position);
bindInfoWindow(marker, map, infoWindow, html, storeid);
}
map.fitBounds(bounds);
});
}
function bindInfoWindow(marker, map, infoWindow, html, storeid) {
google.maps.event.addListener(marker, 'click', function() {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
infoWindow.setContent(request.responseText+html);
infoWindow.open(map, marker);
}
};
request.open('GET', 'php/infobox.php?id='+storeid, true);
request.send(null);
});
}
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 changeZoomCenter(ll,z){
var geo = new google.maps.Geocoder;
geo.geocode({'address':ll},function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var myLatLng = results[0].geometry.location;
map.panTo(myLatLng);
z=parseInt(z);
map.setZoom(z);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function road(s,e) {
var start = s;
var end = e;
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
ページの中央にマーカー(アイコン)を作成する方法を教えてください。