2016-06-20 17 views
1

これが基本的に表示される場合は申し訳ありませんが、Googleサービスを初めて使用しています。週末にウェブサイトのイベントを表すマーカーで地図を作成しています。自分だけのGoogleスプレッドシートに新しいデータを追加するとはい、埋め込みコードを組み込みのGoogleマップを手動で更新する必要なく自動更新できますか?

おかげ要するに

答えて

1

をリフレッシュする必要がないため、追加された新しいマーカーとデータを持つ私の埋め込まれた週末のマップの方法があります。長い答えは、特定のコードを提供するには広すぎます。しかし、私はそれを行う方法を説明することができます。

新しいデータポイントを取得するには、データソースへのAJAX呼び出しを行う必要があります。したがって、ページはJavaScriptで動的に構築されます。私は実際にこれをどのように行うことができるかの作業モデルを持っています。このページのソースを調べれば、より良いアイデアが得られます。 Travel tacking webApp

どのように動作するかを確認するには、アカウントを作成して旅行を作成する必要があります。しかしここに関連コードがあります。 (データ用のPHP、他のすべてのJavaScript)ああ、この例ではAJAXを使用していません。それはあなたの状況に対する単なる提案でした。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script> 

<script type="text/javascript"> 
    function codeLatLong() { 
    var geocoder = new google.maps.Geocoder(); 
    var address = "64 martha dr hamilton, CA 90210"; 
    address = document.getElementById("addressIs").value; 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 

     if (status == google.maps.GeocoderStatus.OK) { 
      var latitude = results[0].geometry.location.lat(); 
      var longitude = results[0].geometry.location.lng(); 


      document.getElementById("latIs").value = latitude; 
      document.getElementById("lonIs").value = longitude; 

      initialize(latitude, longitude); 

     } 

    }); 
} 

    function initialize(latitude, longitude) { 
     var latlng = new google.maps.LatLng(lats[1], longs[1]); 

     var myOptions = { 
      zoom: 14, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: false 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     //var marker = new MarkerWithLabel({ 
       var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      labelContent: streets[1], 
      labelAnchor: new google.maps.Point(-7, 20), 
      labelClass: "labels", 
      title: "location : home" 
     }); 
     for (xx=2;xx<lats.length;xx++){ 
     var latlng = new google.maps.LatLng(lats[xx], longs[xx]); 
      //marker = new MarkerWithLabel({ 
         marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      labelContent: streets[xx], 
      labelAnchor: new google.maps.Point(-7, 20), 
      labelClass: "labels", 
      title: "location : home" 
     }); 
     } 
    } 


//codeLatLong(); 
//initialize(40, -75); 
</script> 
+0

ありがとうございます。 –

関連する問題