Google지도> 장소 검색 동양화가 아닙니다

Question

Google지도 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 = []; 
    ... 

처럼 적절하게 설정해야합니다