クリック可能な情報ボックスを Google マップのルート案内に追加できません。
これを初期化関数内で機能させることはできますが、xml ファイルを介して追加のマーカーを追加するときにこれを機能させる必要があります。以下の完全なコードを参照してください。
助けてくれてありがとう..
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var stepDisplay;
var map;
var markersArray;
var markers = [];
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng( <? echo $lat; ?> , <? echo $lon; ?> );
var rendererOptions = {
draggable: true
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
//ADD LIST
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
function calcRoute() {
var travelMode = 'DRIVING';
var start = $("#routeStart").val();
var via = $("#routeVia2").val();
var end = $("#routeVia").val();
var waypoints = [];
if (via != '') {
waypoints.push({
location: via,
stopover: true
});
}
var request = {
origin: start,
destination: end,
waypoints: waypoints,
unitSystem: google.maps.UnitSystem.IMPERIAL,
travelMode: google.maps.DirectionsTravelMode[travelMode]
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var myRoute = response.routes[0];
var txtDir = '';
for (var i = 0; i < myRoute.legs[0].steps.length; i++) {
txtDir += myRoute.legs[0].steps[i].path + "";
}
var strLAT = "" + txtDir;
//---------------------------------------------------------
//SEND DATA TO URL
var DATET = $("#DATET").val();
var TIMET = $("#TIMET").val();
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("POST", 'MYPHPFILE', true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("LATLON=" + strLAT + "&getURL=" + end + "&TIMET=" + TIMET + "&DATET=" + DATET);
//-------------------------------------------------------
//RETURN DATA FOR PLACE MARKERS
var getURL = "MYXMLFILE" + end + ".xml";
jQuery.get(getURL, function(data) {
jQuery(data).find("marker").each(function() {
var eachMarker = jQuery(this);
var markerCoords = new google.maps.LatLng(
parseFloat(eachMarker.find("Lat").text()),
parseFloat(eachMarker.find("Lng").text())
);
var header = eachMarker.find("title").text();
var content = eachMarker.find("Content").text();
var wxicon = eachMarker.find("icon").text();
//--------------------------------------------------------------------------
//ADD INFO BOXES
var contentString = "HELLO WORLD";
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
//--------------------------------------------------------------------------
marker = new google.maps.Marker({
position: markerCoords,
icon: wxicon,
map: map,
animation: google.maps.Animation.DROP,
title: header,
});
});
});
//--------------------------------------------------------------------------
} else {
//ERROR MESSAGES
if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');
} else {
alert("There was an unknown error in your request. Requeststatus: nn" + status);
}
}
});
}