1

Google マップを使用して住所をジオコーディングし、その情報を入力フィールドに入力しています。1 つのマップでこれを正常に実行できますが、ページに 2 つのマップが必要です。それぞれに独自のジオコーディング情報があります。

私は Javascript コードをまとめようとしましたが、基本的に最初のマップを複製しました。

私のJavaScriptは次のとおりです

<script type="text/javascript">

         var geocoder;
         var map;

         function initialize() {
             geocoder = new google.maps.Geocoder();
             var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
             var mapOptions = {
               zoom: 10,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             }
             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
          }

         function codeAddress() {
             var address = document.getElementById('address').value;
             geocoder.geocode( { 'address': address}, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
                 var marker = new google.maps.Marker({
                     map: map,
                     position: results[0].geometry.location
                 });
                 document.getElementById("input_15_169").value = marker.getPosition().lat();
                 document.getElementById("input_15_167").value = marker.getPosition().lng();
                 document.getElementById("input_15_92").value = address;

               } else {
                 alert('Geocode was not successful for the following reason: ' + status);
               }
             });
           }

           var geocoder;
               var map2;

               function initialize() {
                   geocoder = new google.maps.Geocoder();
                   var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
                   var mapOptions = {
                     zoom: 10,
                     center: latlng,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                   }
                   map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
                }

               function codeAddress() {
                   var address = document.getElementById('address').value;
                   geocoder.geocode( { 'address': address}, function(results, status) {
                     if (status == google.maps.GeocoderStatus.OK) {
                       map.setCenter(results[0].geometry.location);
                       var marker = new google.maps.Marker({
                           map: map2,
                           position: results[0].geometry.location
                       });
                       document.getElementById("input_16_169").value = marker.getPosition().lat();
                       document.getElementById("input_16_167").value = marker.getPosition().lng();
                       document.getElementById("input_16_92").value = address;

                     } else {
                       alert('Geocode was not successful for the following reason: ' + status);
                     }
                   });
                 }

         </script>

私のhtmlには、マップに2つの異なるIDmap_canvasとmap_canvas2

ただし、ページをロードすると、2 番目のマップのみが表示され、住所をプロットしようとすると、上記の入力フィールドが正しい場合でも何も起こりません。

この 2 番目のマップを追加し、上記の JavaScript でアドバイスを探しているときに、何か間違ったことをしていると思います。

ありがとう

JSFiddle コードはこちらhttp://jsfiddle.net/JJKx5/

4

1 に答える 1

2

同じ名前のメソッドを持つことはできません。そうしないと、インタープリターはどれを選択すればよいかわからなくなるため、ロジックを 1 つのメソッドに入れます。

http://jsfiddle.net/JJKx5/1/

         function initialize() {
             geocoder = new google.maps.Geocoder();
             var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
             var mapOptions = {
               zoom: 10,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
             map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
          }
于 2012-11-17T14:19:22.217 に答える