GoogleマップAPIは、私はこの選択を持っている...選択オプション

Question

私は選択でオプションを選択することによって、発射POST要求に基づいてマップのマーカーを表示する必要がありますが、欠けているものがある

に基づいて

をマップを初期化します

<select id="locationSelector" class="selectpicker"> 
<option th:each="l : ${locations}" th:value="${l.locationId}" th:text="${l.name}"></option> 
</select> 

その後、私のスクリプト

var id = $('#locationSelector :selected').val(); 

    function updateLocation(){ //take the objects 
      console.log('locationId is ' + id); 

       $.ajax({ 
       type: "POST", 
       url: "/admin/map/vehicles", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       data: { 
       locationId:id 
      }, 
       success: function (response) { 
          console.log(response); 
         location = response.location; 
         vehicles = response.vehicles; 

         }, 
       error: function(response){ 
        alert(response.responseJSON.message); 
       } 
       }); 
      } 


function setVehicleMarkers(map, cars) { //create the markers 
      var infowindow = new google.maps.InfoWindow(); 

      vehicles.forEach(function (arrayItem) { 
       var vehicle = arrayItem; 
       var myLatLng = new google.maps.LatLng(vehicle.lat, vehicle.lng); 

       var vehicleIcon; 
       }    } 

       var icon = { url : '/images/vehicles/'+vehicleIcon+'.png', 
         size : new google.maps.Size(47, 63), 
         origin : new google.maps.Point(0, 0), 
         anchor : new google.maps.Point(0, 63)}; 
       var vehicleMarker = new google.maps.Marker({ 
        position: myLatLng, 
        map: map, 
        title: vehicle.plateId, 
        zIndex: vehicle.vehicleId, 
        icon: icon 

       }); 

       var contentString = '<div class="text-center"><b><a href="/admin/vehicle/'+ vehicle.vehicleId + '">'+vehicle.plateId + '</a></b><br/><br/>'; 
        google.maps.event.addListener(infowindow, 'domready', function(event){ 
}) 

        google.maps.event.addListener(vehicleMarker, 'click', function(content){ 
         return function(){ 
         infowindow.setContent(content); 
         infowindow.open(map, this); 
         } 
        }(contentString)); 

       arrVehicles.push(vehicleMarker); 

      }); 

     } 

function initMap() { //initialize the map 
      updateLocation(); 
      var myOptions = { 
        zoom:9, 
        center : new google.maps.LatLng(location.lat, location.lng), 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 

      }; 

var map = new google.maps.Map(document.getElementById('map'), myOptions); 

      //create empty LatLngBounds object 
      var bounds = new google.maps.LatLngBounds(); 


      //now fit the map to the newly inclusive bounds 
      google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { 
      this.setZoom(map.getZoom()-1); 

      if (this.getZoom() > 15) { 
      this.setZoom(15); 
      }; 
     }); 


      map.fitBounds(bounds); 
      map.panToBounds(bounds); 
      console.log(vehicles); 
      setVehicleMarkers(map, vehicles); 

     } 

は問題は私のコントローラがPOSTを作るとき、それが原因ときミリアンペアであるべきパラメータlocationIdが定義されていないことを言い続けていることですpは、私はすべてがロードされるとき、それがロードされています確かにdocument.ready（）内initMapをラップしようとした... locationSelectorがまだロードされていない、初期化され、その後、GoogleマップのAPI呼び出し

<script 
     src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=AAAAAAAAAAAAA&amp;callback=initMap" 
     async="async" defer="defer"></script> 

されますまた

function initMap(){ 
    $(function(){ 
     // Ready to retrieve the ID and initialise the map. 
    }); 
} 

、あなたはAJAX successコールバック内からsetVehicleMarkers関数を呼び出す必要がありますし、あなただけが完了したら、updateLocationを呼び出す：あなたはこのような何かを行うことができ

Answer 1

私にエラーを与えます地図を初期化する。

function updateLocation(map){ 
     $.ajax({ 
     ..... 
     ,success: function (response) { 
        location = response.location; 
        vehicles = response.vehicles; 
        setVehicleMarkers(map, vehicles); 
        }, 
      .... 
     }); 
} 


function setVehicleMarkers(map, cars) { 
    .... 
} 

function initMap() { 
    $(function(){ 
     // Initialise map 
     var map = .... 
     id = $('#locationSelector :selected').val(); 
     updateLocation(map); 
    }) 
} 

Answer 2

initMap前に、準備を文書化するために、この行を追加してみてください。あなたがそれらを使用する前にすべての変数やHTML要素が初期化されている、あなたはこのような何かをしなければならないことを保証するために

。

var id = $('#locationSelector :selected').val();