3

私はグーグルマップキャンバスとマップの横にある2つのリンクを含む作業マップを持っています。クリックすると、ユーザーは保存されているlatlongの場所と情報ウィンドウに移動します。次のステップは、マーカー（成功しています）とinfoWindowsのスタイルを設定することでした。

infoWindowsのスタイルを設定するために、スタイルを設定したInfoBoxプラグインを使用しましたが、このプラグインを2つの異なるinfoWindowsに使用する方法がわかりません。スタイルは変わりませんが、内容は変わります。現時点ではinfoBoxは機能していますが、ユーザーが2番目のリンクをクリックしても、infoBoxのコンテンツは同じままです。

ワーキングリンク： http： //jsfiddle.net/charliebee/363ea/3/

コード

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

var side_bar_html = ""; 
var gmarkers = []; 
var map = null;
var infobox;


function initialize() {
  var myOptions = {
    zoom: 12,
    styles: styles,
    center: new google.maps.LatLng(54.97962549875775,-1.5975022315979004),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  }
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  google.maps.event.addListener(map, 'click', function() {
});

  var point = new google.maps.LatLng(lat,long);
  var marker = createMarker(point,"City 1")

  var point = new google.maps.LatLng(lat,long);
  var marker = createMarker(point,"City 2")

  document.getElementById("marker_list").innerHTML = side_bar_html;
}

function myclick(i) {
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {

    var contentString = html;
    var image = 'images/mapIcon.png';

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

     infobox = new InfoBox({
         content: document.getElementById("infobox","infobox2"),
         disableAutoPan: true,
         maxWidth: 280,
         pixelOffset: new google.maps.Size(0, 0),
         zIndex: null,
         boxStyle: {
         backgroundURL:"images/bg.png",
         opacity: 0.89,
         width: "280px"
        },
        closeBoxMargin: "20px 20px 20px 20px",
        closeBoxURL: "images/close.png",
        infoBoxClearance: new google.maps.Size(1, 1),
    enableEventPropagation: false
    });
    google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
        map.panTo(loc);
        infobox.setContent(contentString); 
        infobox.open(map,marker);
        });

       gmarkers.push(marker);

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

<div class="infobox-wrapper">
    <div id="infobox">
    Content 1
    </div>
    <div id="infobox2">
    Content 2
    </div>
</div

誰かが私にこれを達成するためのアドバイスを与えることができますか？2つのinfoBoxオプションまたはマーカー名を使用してコンテンツを修正しようとしましたが、成功しませんでした。これは、スタイルシートを除いてすべて私のコードです。

4

1 に答える 1

0

問題はアイコンにあります：

http://jsfiddle.net/z9Apy/1/

これを変更した場合：

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

に：

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

マーカーが表示されます。

アップデート：

コンテンツの問題は次の行です。

content: document.getElementById("infobox","infobox2")

一度に返すことができる要素は1つだけです。1つのオプションは、createMarker関数を変更して、使用するIDの要素のIDを取得することです。

function createMarker(latlng, name, elId) {
    var image = 'images/mapIcon.png';
    
    var marker = new google.maps.Marker({
        position:latlng,
        map: map /*,
        icon: image */
        });
           
        infobox = new InfoBox({
         content: document.getElementById(elId),
         disableAutoPan: true,
         maxWidth: 280,
         pixelOffset: new google.maps.Size(60, -150),
         zIndex: null,
         boxStyle: {
         opacity: 0.89,
         width: "280px"
        },
        closeBoxMargin: "20px",
        closeBoxURL: "images/cross.png",
        infoBoxClearance: new google.maps.Size(1, 1),
        enableEventPropagation: false
    });
        
    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(latlng);
        infobox.setContent(document.getElementById(elId)); 
        });
    
    gmarkers.push(marker);
    
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

例

于 2013-01-21T17:28:32.443 に答える