2017-03-07 3 views
-1

GoogleオートコンプリートとGoogle Maps API V3を組み合わせて使用​​しようとしています。Google Maps API V3スクリプトを動的に作成する

ユーザーは、アドレスフィールド(page1)にアドレスを入力し、「次へ」をクリックすると、入力したアドレスのマップとともにライトボックス(page2)が表示されます。

だから、アドレスのlat + long(page1から)は照会パラメーターとしてライトボックスURL(page2)に渡されます。以下のスクリプトは、ページロード時にlat + longを使用して自身を構築する必要があります。以下は

はデフォルトでGoogleマップ

<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> 

何ページの読み込み上でスクリプトを構築する方法であるについて私はわかりませんよ。誰でも助言してもらえますか?ありがとうございました!

答えて

0

実際には、URLから各クエリパラメータの値を取得し、initMapでそれを使用してページ読み込み時に変数を渡すために、関数getQueryVariableを使用してこれを解決しました。

<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>