외부 링크 트리거 Google Map/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]); 
} 

지도 변수도 전역 적입니다.

또한 맞춤 설정하십시오.