Помощь с GOOGLE API

Статус
В этой теме нельзя размещать новые ответы.
A

avgaz

Участник
Регистрация
18 Окт 2006
Сообщения
189
Реакции
7
Зравствуйте. Имеется вот такой код прокладки маршрута
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 по отдельности всё работает
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху