2015-04-03 63 views
0

以下代码是我正在使用的代码。我试着阅读并观看Google Developers发布的you tube视频。我对此很陌生,需要一些帮助。我想将自动填充搜索框放入我的地图中。任何帮助,将不胜感激。何处放置自动完成搜索框的HTML代码

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src=""http://maps.google.com/maps/api/js?libraries=places&sensor=false""></script> 
    <script> 
var map; 
function initialize() { 
    var mapOptions = { 
    zoom: 13, 
    center: new google.maps.LatLng(47.717312, -116.951370), 
    disableDefaultUI: true, 

    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html> 

这些是来自谷歌的说明,他们对他们去哪里感到困惑。

// Create the search box and link it to the UI element. 
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input')); 
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input)); 

  // Listen for the event fired when the user selects an item from the 
  // pick list. Retrieve the matching places for that item. 
  google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

回答

0

Javascript代码放在里面的initialize()你有

function initialize(){ 
//autocomplete code goes here. 
} 

我刚才提出的这个JSFiddle,使用代码this tutorial