Помощь с GOOGLE API

Тема в разделе "JavaScript", создана пользователем avgaz, 31 июл 2012.

Статус темы:
Закрыта.
Модераторы: ZiX
  1. avgaz

    avgaz

    Регистр.:
    18 окт 2006
    Сообщения:
    188
    Симпатии:
    6
    Зравствуйте. Имеется вот такой код прокладки маршрута
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <title>Маршрут проезда - API Google Maps v3</title>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&language=ru"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
     
    <style type="text/css">
     
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
     
    #map_canvas {
    float:left;
    width:70%;
      height: 600px;
      z-index: 0;
    }
     
    #directionsPanel{
    width: 30%;
    float:right;
    }
     
    .suggestionsBox {
                    font-size: 11px;
            position: absolute;
            left: 20px;
            margin: 10px 0px 0px 0px;
            width: 160px;
            background-color: #fff;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border: 2px solid #000;
            color: #000;
        z-index:  99999;
        }
     
        .suggestionList {
            margin: 0px;
            padding: 0px;
     
        }
     
        .suggestionList li {
     
            margin: 0px 0px 3px 0px;
            padding: 3px;
            cursor: pointer;
                    list-style:none;
        }
     
        .suggestionList li:hover {
            background-color: #4482B7;
        }
     
     
    </style>
     
    <script type="text/javascript">
    var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
     
      function initialize() {
     
        directionsDisplay = new google.maps.DirectionsRenderer();
        var nnovgorod = new google.maps.LatLng(56.31534, 43.99150);
        var myOptions = {
          zoom:12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: nnovgorod
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     
        directionsDisplay.setMap(map);
     
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));
     
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
     
          computeTotalDistance(directionsDisplay.directions);
     
        });
     
      }
     
      function calcRoute() {
        var start = 'Нижний Новгород, '+document.getElementById("name_street").value;
        var end = 'Нижний Новгород, '+document.getElementById("end").value;
        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);
          }
        });
      }
     
      function computeTotalDistance(result) {
     
        var total = 0;
     
        var myroute = result.routes[0];
     
        for (i = 0; i < myroute.legs.length; i++) {
     
          total += myroute.legs[i].distance.value;
     
        }
     
        total = total / 1000.
     
        document.getElementById("total").innerHTML = total + " км";
      }
     
    function lookup(name_street) {
            if(name_street.length == 0) {
                // Hide the suggestion box.
                $('#suggestions').hide();
            } else {
                $.get("rpc.php", {queryString: ""+name_street+""}, function(data){
                    if(data.length >0) {
                        $('#suggestions').show();
                        $('#autoSuggestionsList').html(data);
                    }
                });
            }
        } // lookup
     
        function fill(thisValue) {
            $('#name_street').val(thisValue);
            setTimeout("$('#suggestions').hide();", 200);
        }
     
     
    </script>
     
     
     
    </head>
     
    <body onload="initialize()">
     
        <form>
    <div>
        <p><strong>Введите название улицы отправления:</strong></p>
    <input type="text" size="35" value="" id="name_street" onkeyup="lookup(this.value);" onblur="fill();" />
    <input type="text" size="35" name="end" id="end"/>
    <input name="StreetSearch" type="button" onClick="calcRoute();" value="Найти" /></p>
    </div>
    <div class="suggestionsBox" id="suggestions" style="display: none;">
    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div>
    </div>
    </form>
    <div id="map_canvas"></div>
    <div id="directionsPanel">
    <p>Расстояние: <span id="total"></span></p>
    </div>
     
     
    </body>
    </html>
    
    Он работает как нужно, но когда я добавляю функцию автозаполнения полей
    var input = document.getElementById('end');
    var autocomplete = new google.maps.places.Autocomplete(input);
    из этого же API то он перестает работать вот уже не рабочий код
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <title>Маршрут проезда - API Google Maps v3</title>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&language=ru"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
     
    <style type="text/css">
     
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
     
    #map_canvas {
    float:left;
    width:70%;
      height: 600px;
      z-index: 0;
    }
     
    #directionsPanel{
    width: 30%;
    float:right;
    }
     
    .suggestionsBox {
                    font-size: 11px;
            position: absolute;
            left: 20px;
            margin: 10px 0px 0px 0px;
            width: 160px;
            background-color: #fff;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border: 2px solid #000;
            color: #000;
        z-index:  99999;
        }
     
        .suggestionList {
            margin: 0px;
            padding: 0px;
     
        }
     
        .suggestionList li {
     
            margin: 0px 0px 3px 0px;
            padding: 3px;
            cursor: pointer;
                    list-style:none;
        }
     
        .suggestionList li:hover {
            background-color: #4482B7;
        }
     
     
    </style>
     
    <script type="text/javascript">
     
     
    var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
     
      function initialize() {
     
        directionsDisplay = new google.maps.DirectionsRenderer();
        var nnovgorod = new google.maps.LatLng(56.31534, 43.99150);
        var myOptions = {
          zoom:12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: nnovgorod
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        // автозаполение поля
        var input = document.getElementById('end');
        var autocomplete = new google.maps.places.Autocomplete(input);
        directionsDisplay.setMap(map);
     
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));
     
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
     
          computeTotalDistance(directionsDisplay.directions);
     
        });
     
      }
     
      function calcRoute() {
        var start = 'Нижний Новгород, '+document.getElementById("name_street").value;
        var end = 'Нижний Новгород, '+document.getElementById("end").value;
        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);
          }
        });
      }
     
      function computeTotalDistance(result) {
     
        var total = 0;
     
        var myroute = result.routes[0];
     
        for (i = 0; i < myroute.legs.length; i++) {
     
          total += myroute.legs[i].distance.value;
     
        }
     
        total = total / 1000.
     
        document.getElementById("total").innerHTML = total + " км";
      }
     
    function lookup(name_street) {
            if(name_street.length == 0) {
                // Hide the suggestion box.
                $('#suggestions').hide();
            } else {
                $.get("rpc.php", {queryString: ""+name_street+""}, function(data){
                    if(data.length >0) {
                        $('#suggestions').show();
                        $('#autoSuggestionsList').html(data);
                    }
                });
            }
        } // lookup
     
        function fill(thisValue) {
            $('#name_street').val(thisValue);
            setTimeout("$('#suggestions').hide();", 200);
        }
     
     
    </script>
     
     
     
    </head>
     
    <body onload="initialize()">
     
        <form>
    <div>
        <p><strong>Введите название улицы отправления:</strong></p>
    <input type="text" size="35" value="" id="name_street" onkeyup="lookup(this.value);" onblur="fill();" />
    <input type="text" size="35" name="end" id="end"/>
    <input name="StreetSearch" type="button" onClick="calcRoute();" value="Найти" /></p>
    </div>
    <div class="suggestionsBox" id="suggestions" style="display: none;">
    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div>
    </div>
    </form>
    <div id="map_canvas"></div>
    <div id="directionsPanel">
    <p>Расстояние: <span id="total"></span></p>
    </div>
     
     
    </body>
    </html>
    
    Не как не могу понять в чем причина идет просто ошибка TypeError: google.maps.places is undefined по отдельности всё работает
     
Статус темы:
Закрыта.