Bing MapsまたはGoogle Mapsを動的に更新する方法

Question

私が構築しているプロジェクトでは、データベースに保存されているアドレスをユーザが選択できるようにしたいそのアドレスで詳細情報を表示します。ユーザーがリンクをクリックすると、別のページに移動し、詳細な情報と住所の地図が表示されます。

私がやりたいことは、あらかじめ定義された埋め込みリンクを使用する代わりに、アドレスを動的に配置することです。しかし、私がやりたいことができるかどうかは完全には分かっていません。もしそれができるのであれば、私はそれをやる方法がわかりません。

本質的に、私はデータベースからアドレスを取得してプロジェクトの埋め込みマップに渡すことができますか？

BingやGoogleを使用しても、実際には違いはありません。

乾杯！

Answer 1

はい何をしたいが容易に行うことができます。 Bing MapsとGoogle Mapsは両方とも、ジオコーディングサービスを提供します。ジオコーディングサービスではサービスにアドレスを指定し、サービスはその結果の一部としてマップ上の住所の経度と緯度座標に戻ります。私はここにコードの束を貼り付けることができますが、上のリンクで両方のマップに必要なすべてのコードサンプルを見つけることができます。

ユーザーがアドレスリンクをクリックすると、詳細情報ページに移動します。そのページには、地図を設定するためのjavascriptがあります。あなたのマップを設定するjavascriptに加えて、ジオロケーションサービスを呼び出すには、上記のリンクで詳しく説明されているjavascriptが必要です。本質的には、検索する住所をサービスに渡します。住所が有効な場合、サービスはその住所の経度と緯度の座標を返します。この情報を使用すると、マップ上のその場所にズームし、必要に応じてアドレスを示すためにそこにプッシュピンを置くことができます。

googleマップのexampleについてはこちらをご覧ください。

Interactive SDK of Bing Maps [RESTサービス] - > [クエリで場所を検索]をクリックします。

マップコントロールのajaxバージョンに興味があると思っていますが、他のバージョンはかなり似ていて、多かれ少なかれ同じように動作するはずです。

Answer 2

あなたは常にこのような何かを行うことができます。

<div id="location"></div> 

<script type="text/javascript"> 
    function initialize() { 
     var gpLatlng = new google.maps.LatLng(latitude, longitude); 
     var gpOptions = { 
      zoom: 15, 
      center: gpLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("location"), gpOptions); 

     var marker = new google.maps.Marker({ 
      position: gpLatlng, 
      map: map, 
      title:"Title" 
     }); 
    } 

    function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize&region=GB"; 
     document.body.appendChild(script); 
    } 

    window.onload = loadScript; 
</script>