だから私はこれをしようとしています:
- 住所を入力してください
- 住所の緯度/経度を取得する
- 最終目的地(緯度/経度)とともに「方向」に入れます
- 2 つの div で道順を取得する
簡単に聞こえます。このスクリプトはステータス「OK」を返します。したがって、うまくいくと思うはずですが、違います。
<div id="map_canvas" class="pic50"></div>
<div id="map_directions" class="text50"></div>
bring_me_back('map_canvas','map_directions','some address');
<script>
// bring me back
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function bring_me_back(call_back_map,call_back_directions,address) {
var latlng = new google.maps.LatLng(51.764696,5.526042); // where you're at
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(call_back_map),myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(call_back_directions));
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"My location"
});
// find the address
geocoder = new google.maps.Geocoder (map);
geocoder.geocode ( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var end = results [0].geometry.location; // where you need to go
map.setCenter(results [0].geometry.location);
marker.setPosition(results [0].geometry.location);
var start = "51.764696,5.526042"; // where you're at (random place)
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
alert("Directions was not successful for the following reason: " + status);
});
}
else {
$('#'+call_back).html("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
エラーコンソールに次のように表示されるため、愚かなことをしていることはわかっています:ターゲット:[私のウェブサイト]#が見つかりませんでした
面白いことに、マップはマーカー付きのジオロケーターの正しい場所を中心にしています。だから、方向を押し戻すことを除いて、それはうまくいく(私は思う)