ColdFusion + Google Map API V3 - 情報ウィンドウと境界設定

https://stackoverflow.com/questions/3876211

28-09-2019
|

質問

簡単に言えば、ポップアップインフェインドのクリック可能なマーカーを作成するか、返されたマーカーの境界を取得してマップ範囲とズームレベルをリセットするコードを作成できるようです。私は2つを組み合わせることができないようです。 以下の私の例は、マップの範囲をクエリの結果にうまく設定します。 しかし、私のループがどのように構造化されているか、そしてvar mapoptionsでは、中心を設定していることを考えると、マーカーにaddlistenerイベントを含める方法がよくわかりません：gbounds.getcenter（）。これらの2つの問題は、マップまたはマーカーにイベントを追加する能力を複雑にしているようです。

    <cfquery name="myquery" datasource="xxxx">
       SELECT name, lat, long
       FROM tblMain
    </cfquery>

    <cfset bridgeCoord=arrayNew(1)>

    <cfloop query="myquery">
   <cfset bridge[CurrentRow] = structNew()>
   <cfset bridge[CurrentRow].lat=lat>
       <cfset bridge[CurrentRow].long=longX>
          <cfset bridge[CurrentRow].name=name>
     </cfloop>



     <script>
       $(document).ready(function() {
       var gbounds = new google.maps.LatLngBounds();
        var markers = [];


       <cfloop index="mi" array="#bridge#">
           <cfoutput> 
               //make the point
               var point = new google.maps.LatLng(#mi.lat#,#mi.long#);
               gbounds.extend(point);
               //make the marker
               var marker = new google.maps.Marker({position: point, title:"#mi.name#"});
               markers[markers.length] = marker; 
            </cfoutput>
       </cfloop>

              var mapOptions = {
                    zoom:3,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                       },
                     mapTypeId:google.maps.MapTypeId.ROADMAP,
                     center:gbounds.getCenter()
                        };



        var map = new google.maps.Map(document.getElementById('myMap'), mapOptions);

           map.fitBounds(gbounds);

           for(var i=0; i<markers.length; i++) markers[i].setMap(map);

      });

参考までに、以下のようにコードの一部を整理してみました。 これは、クリックイベントをマーカーに追加するのに最適です しかし、その後、私は自分の中心を使用することはできません：gbounds.getcenter（）またはmap.fitbounds（）要素b/c Mapoptionsが最初に設定され、新しいMap変数に渡され、Gboundsはその時点で定義されていません。ハードコードLAT/LONG TO CENTER：そこに保管しているようです。

       function initialize() {

    var gbounds = new google.maps.LatLngBounds();    


  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(39.0,-94.1),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("myMap"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

  // Add markers to the map
  // Set up three markers with info windows 

    <cfloop index="mi" array="#bridge#">
        <cfoutput>

             //make the point
               var point = new google.maps.LatLng(#mi.lat#,#mi.long#);
            gbounds.extend(point);
            //make the marker
               var marker = createMarker(point, "#mi.name#", "#mi.name#")

        </cfoutput>
    </cfloop>


}
 map.fitBounds(gbounds);;

function createMarker(latlng, tip, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        title: tip,
        map: map,
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}


var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

更新10/12：それを機能させました。実際、タイラーのコードにはタイプミスがありますが、それはマイナーです。私はJQueryに精通していないので、このコードをどれだけうまく取得して拡張できるかはわかりませんが、これは始まりです。私が苦労しているということの1つは、ゼロマーカーが返されたときにマップを処理する方法です。私の質問では、レコードを返すことができないことが可能です。何が起こるかは、地図が描かれているが、それは中心にあり、海の真ん中にズームされていることです。設定したセンターにデフォルトであるべきだと考えました（Center：新しいGoogle.maps.latlng（39、-94.1）がそうではありません。

Replace: 

var $markers = $container.find(".map-marker");

with

var $markers = $container.find(".mapMarker");

解決

編集

私は実際に1か月ほど前にこれを扱ったばかりです。ここに、私がそれをあなたのようにするために働いたものからのいくつかの修正コードがあります。

Google Maps API V3とjQuery 1.4.2（これはjQueryの任意のバージョンで動作するはずです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<cfquery name="mi" datasource="xxxx">
SELECT name, lat, long, content
FROM tblName
</cfquery>

<ul id="mapMarkers">
<cfoutput query="mi">
    <li class="mapMarker" data-latitude="#mi.lat#" data-longitude="#mi.long#">
        <div class="info-window">
        <h1 class="name">#mi.name#</a></h1>
        <div class="content">#mi.content#</div>
        </div>
    </li>
</cfoutput>
</ul>
<div id="map"></div>

<script type="text/javascript">
$(function() {
    var $container = $("#mapMarkers");

    var $map = $("#map");
    var $markers = $container.find(".map-marker");

    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow({
        maxWidth: 300
    });

    var gmap = new google.maps.Map($map[0], {
        zoom: 8
        , mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $markers.each(function(){
        $this = $(this);
        var latitude = $this.attr("data-latitude");
        var longitude = $this.attr("data-longitude");
        var content = $this.find(".info-window").remove().html();
        var latlng = new google.maps.LatLng(latitude, longitude);

        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng
            , map: gmap
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(content);
            infowindow.open(this.map, this);
        });

        google.maps.event.addListener(gmap, 'click', function() {
            infowindow.close();
        });

        $this.click(function(e, el) {
            e.preventDefault();

            infowindow.setContent(content);
            infowindow.open(gmap, marker);
        })
    });

    if($markers.length > 1)
        gmap.fitBounds(bounds);
    else
        gmap.setCenter(bounds.getCenter());

    $container.hide();
});
</script>

編集を終了します

まず、マップとMapoptionsを上部に移動する必要があります。次に、ループの内側に、マーカーのマップにaddListenerを追加するだけです。

<cfloop index="mi" array="#bridge#">
   <cfoutput> 
       //make the point
       var point = new google.maps.LatLng(#mi.lat#,#mi.long#);
       gbounds.extend(point);
       //make the marker
       var marker = new google.maps.Marker({position: point, title:"#JSStringFormat(mi.name)#", map:map});
       google.maps.event.addListener(marker, 'click', function() {
           infowindow.setContent("#JSStringFormat(mi.content)#");
           infowindow.open(this.map, this);
       });
       markers[markers.length] = marker; 
    </cfoutput>
</cfloop>

注意すべきこと：

名前とコンテンツの変数にJSStringFormatを追加しました。

マーカーの作成には、「マップ：マップ」を追加できるため、下部にforループを実行する必要がないため、マップオプションがあります。

また、マーカーの前にマップを作成するので、ズームと中央のオプションを下部に移動します。

if(markers.length > 1)  
    map.fitBounds(gbounds);  
else  
    map.setCenter(gbounds.getCenter());

一度最後のこと：

それ以外の

markers[markers.length] = marker;

これを使用できます

markers.push(marker);

他のヒント

問題が何であるかはわかりませんが、JavaScriptとColdFusionコードを解き出すと、デバッグ（および拡張）が簡単になる可能性があります。 JSですべてのマップロジックを記述し、CFを使用して、JSが処理するデータ（LAT/LNG/タイトルの配列）を作成できます。

<script>
// Data For Map Logic
var points = [];
<cfloop query="...">
  <cfoutput>
    points.push({lat: #db_lat#, lng: #db_lng#, etc...});
  </cfoutput>
</cfloop>

// Logic for setting map extent and creating pop-ups
for (var i = 0; i < points.length; i++) {
  // do your magic
}
</script>

このアプローチを使用すると、ポイントアレイをハードコーディングすることにより、テスト中にCFとデータベースを完全に排除できます。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow