こんにちは誰かがこれを手伝うことができますか?私はマーカーが各場所を記録している地図を持っています(duh)そしてマーカーの中にはポップアップを表示するルート案内リンクがあります。ポップアップの方向の上にあるマップ(方向を含む2番目のマップ)が表示されないことを除いて、すべてが正常に機能します。方向マーカーが付いた灰色のボックスです。
これはjsです:
/* ::::::::::::::::::::::::::::::::::::DIRECTIONS:::::::::::::::::::::::::::::: */
var mapContainer = document.getElementById('map-container');
var dirContainer = document.getElementById('dir-container');
var fromInput = document.getElementById('from-input');
var toInput = document.getElementById('to-input');
// API Objects
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer();
var map2 = null;
function showDirections(dirResult, dirStatus) {
if (dirStatus != google.maps.DirectionsStatus.OK) {
alert('Directions failed: ' + dirStatus);
return;
}
// Show directions
dirRenderer.setMap(map2);
dirRenderer.setPanel(dirContainer);
dirRenderer.setDirections(dirResult);
};
function getSelectedTravelMode() {
value = google.maps.DirectionsTravelMode.DRIVING;
return value;
};
function getDirections() {
var fromStr = fromInput.value;
var toStr = toInput.value;
var dirRequest = {
origin: fromStr,
destination: toStr,
travelMode: getSelectedTravelMode()
};
dirService.route(dirRequest, showDirections);
};
function init() {
var latLng2 = new google.maps.LatLng(37.77493, -122.419415);
map2 = new google.maps.Map(mapContainer, myOptions2);
var myOptions2 = {
zoom: 13,
center: latLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Show directions onload
getDirections();
}
/* :::::::::::::::::::::::::::MAIN MAP::::::::::::::::::::::::::::::::::::::: */
var address;
var markers;
var windows;
var mapMarkers = new Array();
var map, marker, i;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var map_center = new google.maps.LatLng(37.0902, -95.7129);
var myOptions = {
zoom: 4,
center: map_center,
scrollwheel: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create a lettered icon for this point using our icon class
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
if (markers !== null && windows !== null) {
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: markers[i],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
mapMarkers.push(marker);
bounds.extend(markers[i]);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function (e) {
infoWindow.setContent(windows[i]);
infoWindow.open(map, marker);
g = document.getElementById("info");
address = g.getAttribute("rel");
//console.log(address);
}
})(marker, i));
}
google.maps.event.addListener(infoWindow, 'domready', function () {
$("#info").on("click", function (e) {
toInput.value = address;
$(".dir-overlay").css("visibility", "visible");
// init();
// $('#to-text').text(address);
e.preventDefault();
})
});
$(".closeDirections").click(function () {
$(".dir-overlay").css("visibility", "hidden");
});
if (markers !== null && markers.length === 1) {
map.setCenter(markers[0]);
map.setZoom(11);
} else {
map.fitBounds(bounds);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
これはhtml(短縮)です:
<div id="map_canvas"></div>
<div class="dir-overlay">
<div class="overlaymap-wrapper">
<div class="titlebar">
<a href="#" class="closeDirections">close</a>
</div>
<div class="innermap-wrapper">
<div class="directions-inputs">
<span class="blue-text">Starting Location</span> <input id="from-input" type="text" value="1202 edgewood ave chicago heights il" />
<input id="to-input" type="hidden" value="1600 Amphitheatre Pkwy, Mountain View, CA"/>
<a href="#" onClick="init();" class="blue-button">Get Directions</a>
</div>
<div id="map-container"></div>
<div id="dir-container"></div>
</div>
</div>
</div>
マーカーは、aspxコードビハインドから入力およびプルされています。