谷歌地圖>地方搜索不定位

Question

我使用谷歌地圖API（v3）創建什麼是美化的位置/商店找到。除了附加的地方搜索框外，一切工作都很好（在這裏描述：https://developers.google.com/maps/documentation/javascript/examples/places-searchbox）。

到目前爲止，我已經設法連接搜索框（附件），但無法獲取地圖定位或在選定位置放置一個圖釘。顯然，這與搜索框沒有將自己綁定到地圖有關......我對所有這些都是新手，所以這是我最好的猜測。

任何幫助將不勝感激。

var map; 
    function initialize() { 
     var mapOptions = { 
      zoom: 10, 
      scrollwheel: false, 
      center: new google.maps.LatLng(-33.9, 151.2) 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

     setMarkers(map, beaches); 

     infowindow = new google.maps.InfoWindow({ 
      content: "loading..." 
     }); 


     // 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)); 

    // [START region_getplaces] 
    // 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(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    // For each place, get the icon, place name, and location. 
    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 
    // [END region_getplaces] 

    // Bias the SearchBox results towards places that are within the bounds of the 
    // current map's viewport. 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 

    } 

    var beaches = [ 
     ['Bondi Beach', -33.890542, 151.274856, 4], 
     ['Coogee Beach', -33.923036, 151.259052, 5], 
     ['Cronulla Beach', -34.028249, 151.157507, 3], 
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
     ['Maroubra Beach', -33.950198, 151.259302, 1] 
    ]; 

    function setMarkers(map, locations) { 
     var image = { 
      //url: '../assets/img/icon_mapPin.png', 
      url: 'https://jira.appcelerator.org/secure/attachment/35489/map-pin.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(20, 29), 
      // The origin for this image is 0,0. 
      origin: new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 0,32. 
      anchor: new google.maps.Point(10, 29) 
     }; 

     var shape = { 
      coord: [1, 1, 1, 20, 29, 20, 29 , 1], 
      type: 'poly' 
     }; 
     for (var i = 0; i < locations.length; i++) { 
      var beach = locations[i]; 
      var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       icon: image, 
       shape: shape, 
       title: beach[0], 
       zIndex: beach[3], 
       html: beach[0] 
      }); 

      var contentString = '<div class="siteNotice">'+beach[1]+'</div>'; 

      google.maps.event.addListener(marker, "click", function() { 
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      }); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

有錯誤報告：

Uncaught ReferenceError: markers is not defined 

markers陣列應當被定義並設定正確等

var map; 

function initialize() { 
    var markers = []; 
    ...