谷歌地圖API前/功能（如AJAX）

Question

後，我想找到之前把加載圖標或我需要趕上找到位置開始/結束函數（如AJAX前/成功函數）

我找不到任何與此相關的資源。我想要做的;當你點擊「查找當前位置」按鈕時，你會看到一個小圖標。隱藏圖標當進程正在使用Geocoding service代碼完成

我使用JavaScript沒有jQuery的

Answer 1

，我加了<div id="loader"></div>內<div id="floating-panel"></div>。在這我已經添加圖像標記時geocodeAddress(geocoder, resultsMap)被調用。您可以使用所需的圖標

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 8, 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    } 
 
    }); 
 
    var geocoder = new google.maps.Geocoder(); 
 

 
    document.getElementById('submit').addEventListener('click', function() { 
 
    geocodeAddress(geocoder, map); 
 
    }); 
 

 
} 
 

 
function geocodeAddress(geocoder, resultsMap) { 
 
    document.getElementById('loader').innerHTML = "<img src='https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif'>" 
 
    var address = document.getElementById('address').value; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status === 'OK') { 
 
     document.getElementById('loader').innerHTML = "" 
 
     resultsMap.setCenter(results[0].geometry.location); 
 
     var marker = new google.maps.Marker({ 
 
     map: resultsMap, 
 
     position: results[0].geometry.location 
 
     }); 
 
    } else { 
 
     document.getElementById('loader').innerHTML = "" 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
    /*google.maps.event.addListenerOnce(map, 'idle', function(){ 
 
    alert() 
 
});*/ 
 

 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
}

<div id="floating-panel"> 
 
    <input id="address" type="textbox" value="Sydney, NSW"> 
 
    <input id="submit" type="button" value="Geocode"> 
 
    <div id="loader"> 
 
    </div> 
 
</div> 
 
<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script>