谷歌地图 > 地点搜索不定向

Question

我正在使用 Google Map 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 = [];
    ...