Карты Google версии 3 – служба directionService не определена

Я пытаюсь добавить службу направления на свою карту, но не могу заставить ее работать. Вот html:

<div>
        <span class="bold">From:</span> <input id="start" type="text" size="60" maxlength="150" /> &nbsp;&nbsp;&nbsp;
        <span class="bold">To:</span> <input type="text" disabled="disabled" size="<?php echo $address_length;?>" value="<?php echo $address ;?>"/>
        <input id="end" type="hidden" value="<?php echo $latlng ;?>" /><br/><br/>
        <span class="bold">Mode of Travel:</span>
            <select id="mode">
              <option value="DRIVING">Driving</option>
              <option value="WALKING">Walking</option>
              <option value="BICYCLING">Bicycling</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" class="submit" value="Find Directions!" onclick="calcRoute()";/>
    </div><br class="clear" />
    <div class="inline">
        <div id="mapDiv" style="width:950px; height:550px; border:1px solid #FD5F00;">
            <noscript><h3 style="color:red; margin:150px 0 0 250px">Oppps. Please activate JavaScript to view this map</h3></noscript>
        </div>
    </div>
</div>

И внизу страницы у меня есть встроенный Javascript

$(function() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
initialize();
});

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(<?php echo $latlng; ?>);
    var myOptions = {
        zoom:15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
    directionsDisplay.setMap(map);
}
function calcRoute() {
    var selectedMode = document.getElementById("mode").value;
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode[selectedMode]
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
        }
    });
}

You can see that the latlng is being populated from a PHP variable. Everything seems to be working correct, the initial map loads, etc.

В функции JS calcRoute, если я предупреждаю значения varr, используя

alert(request.toSource());

Я получаю все правильные данные (происхождение, начало и конец), но самая следующая строка - это ошибка, моя ошибка JS - "directionService не определен".

Я искал часы, пытаясь исправить это, но не мог понять, в чем проблема, хотя это так же просто, как карта Google :-(

Если у кого-то есть какие-то мысли, я был бы очень благодарен, это сводит меня с ума!


person Tim Blackburn    schedule 29.10.2011    source источник
comment
Не волнуйтесь, ребята, я идиот! Я переместил 3 vars внутри jquery при загрузке страницы наружу, и теперь все работает нормально... Этот вопрос решен.   -  person Tim Blackburn    schedule 29.10.2011


Ответы (2)


Комментарий от оригинального автора:

Я переместил 3 vars внутри jquery при загрузке страницы наружу, и теперь все работает нормально... Этот вопрос решен.

person Trott    schedule 30.10.2011

person    schedule
comment
Не могли бы вы включить пояснение к коду? Чем отличается исходный код вопроса? Какие у него есть преимущества? Без него это никому не поможет. - person Bowdzone; 04.02.2015