外部リンクGoogleマップ/ JQueryを使用したInfoWindow

Question

Google Maps API V3を使い始めました。私はいくつかのデータ座標を持つHTMLの場所のリストを持っています。地図上に場所が表示されますが、実際にリンク（つまり場所1）を地図の外でクリックすると、情報ウィンドウが開きます。

HTML：

<div id="map"></div> 

<div id="places"> 
    <div class="map-location" data-coordinates='{"lat" : 40.71837, "long" : -74.00608}'> 
    <a href="http://link1.com">Place 1</a> 
    </div> 
    <div class="map-location" data-coordinates='{"lat" : 40.71435, "long" : -74.00597}'> 
    <a href="http://link2.com">Place 2</a> 
    </div> 
    <div class="map-location" data-coordinates='{"lat" : 40.71803, "long" : -74.00305}'> 
    <a href="http://link3.com">Place 3</a> 
    </div> 
    <div class="map-location" data-coordinates='{"lat" : 40.74238, "long" : -73.98946}'> 
    <a href="http://link4.com">Place 4</a> 
    </div> 
</div> 

JS：

var map; 
var infowindow = new google.maps.InfoWindow(); 
var myOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(40.71938, -74.00552), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById('map'), myOptions); 

// grab data attributes from html 
$('.map-location').each(function(index){ 
    var rLat = $(this).data("coordinates").lat; 
    var rLong = $(this).data("coordinates").long; 
    var rName = $(this).find('a').html(); 
    var rHref = $(this).find('a').attr("href"); 
    var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>'; 
    var myLatLng = new google.maps.LatLng(rLat, rLong); 

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

    // click actions 
    google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) { 
    return function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, otherMarkers); 
    } 
    })(otherMarkers, index)); 
}); 

は、どのように私は、地図上の情報ウィンドウボックスをトリガするために、各リンクのクリックの設定について行くのですか？

Answer 1

この例では、あなたがやろうとしているもの達成される：

http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm

は、このことができます願っています！

Answer 2

そのようなあなたのJSを行います 関数の外でグローバルな配列を作る：

var infoArray = new Array(); 
var markerArray = new Array(); 

と情報ウィンドウの各インスタンスを保存します。

var map; 
var infowindow = new google.maps.InfoWindow(); 
var myOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(40.71938, -74.00552), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById('map'), myOptions); 

// grab data attributes from html 
$('.map-location').each(function(index){ 
    var rLat = $(this).data("coordinates").lat; 
    var rLong = $(this).data("coordinates").long; 
    var rName = $(this).find('a').html(); 
    var rHref = $(this).find('a').attr("href"); 
    var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>'; 
    var myLatLng = new google.maps.LatLng(rLat, rLong); 

    var otherMarkers = new google.maps.Marker({ 
    position: myLatLng, 
    map: map 
    }); 
markerArray[myLatLng] = otherMarkers; 

    // click actions 
    google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) { 
    return function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, otherMarkers); 
    } 
    })(otherMarkers, index)); 

}); 

infoArray[myLatLng] = infowindow; 

とHTMLの機能ます

を

<div id="map"></div> 

<div id="places"> 
    <div class="map-location" > 
    <a href="http://link1.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 1</a> 
    </div> 
    <div class="map-location" > 
    <a href="http://link2.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 2</a> 
    </div> 
    <div class="map-location" > 
    <a href="http://link3.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 3</a> 
    </div> 
    <div class="map-location" > 
    <a href="http://link4.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 4</a> 
    </div> 
</div> 

とJS関数を作成します。

function infoOpen(lat,lng){ 
    var myLatLng = new google.maps.LatLng(lat,lng); 
    infoArray[myLatLng].open(map,markerArray[myLatLng]); 
} 

グローバル変数もグローバルです。

また、あなたに合わせてカスタマイズしてください。