動態創建Google Maps API V3腳本功能

Question

因此，我嘗試將Google自動完成功能與Google Maps API V3結合使用。

用戶將一個地址輸入到地址欄（page1）中，點擊'下一步'，然後一個燈箱（page2）將出現，並顯示他們輸入的地址的地圖。

所以會發生什麼是地址的lat + long（從page1）將作爲查詢參數傳遞到lightbox URL（page2）。下面的腳本需要使用lat + long在頁面加載時自行構建。

下面是默認的谷歌地圖

<script> 
    function initMap() { 
    var address = {lat: lat_address, lng: lng_address}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: address 
    }); 
    var marker = new google.maps.Marker({ 
     position: address, 
     map: map 
    }); 
    } 
</script> 

什麼我不能確定的是如何建立的頁面加載的腳本。任何人都可以提醒一下嗎？謝謝！

Answer 1

其實我剛剛利用函數getQueryVariable解決了這個問題，從URL中獲取每個查詢參數的值，然後在initMap中使用它來在頁面加載時傳遞變量。

<script> 
    //Function that allows easy access to param->value 
    function getQueryVariable(variable) 
    { 
    var query = window.location.search.substring(1); 
    var vars = query.split("&"); 
    for (var i=0;i<vars.length;i++) { 
     var pair = vars[i].split("="); 
     if(pair[0] == variable){return pair[1];} 
    } 
    return(false); 
    } 

    //Initialize the GMap 
    function initMap() { 
    var latAddress = getQueryVariable('lat_address'); 
    var latAddress = parseInt(latAddress); 

    var lngAddress = getQueryVariable('lng_address'); 
    var lngAddress = parseInt(lngAddress); 

    var address = {lat: latAddress, lng: lngAddress}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: address 
    }); 
    var marker = new google.maps.Marker({ 
     position: address, 
     map: map 
    }); 
    } 
</script>