-1
특정 마커의 InfoWindow를 대상으로 업데이트 할 수 있습니까?Google Maps API v3 - 마커의 InfoWindow를 업데이트하는 방법
마커를 클릭하면 이름과 주소가 표시된 InfoWindow가 열립니다. 또한 Lat와 Long을 PHP 스크립트에 보내지도에서 div의 데이터베이스에서이 Marker에 대한 자세한 정보를 가져옵니다.
이 오프지도 div를 사용하여 이름과 주소를 업데이트하고 싶습니다. 아무 문제가 없습니다. 특정 마커의 InfoWindow를 타겟팅하여 새 이름과 주소로 업데이트하는 방법에 대해 고민하고 있습니다.
각 마커에 ID를 추가했는데이 ID로 마커를 타겟팅하고 InfoWindow를 해당 정보를 보내는 다른 함수에서 업데이트하는 방법을 모르겠습니다. 데이터베이스
\t var map;
\t var map_center = {lat: <?=$map['lat']?>, lng: <?=$map['lng']?>};
\t var markers = [];
\t var infowindow = new google.maps.InfoWindow();
\t map_initialize(); // initialize google map
\t
\t //############### Google Map Initialize ##############
\t function map_initialize() {
var googleMapOptions = {
center: map_center, // map center
zoom: 15, //zoom level, 0 = earth view to higher value
panControl: true, //enable pan Control
zoomControl: true, //enable zoom control
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
\t scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("map"), googleMapOptions);
$.getJSON("<?=$urlpath?>map_process.php", function(data) {
\t
\t \t \t \t $.each(data, function(key, val) {
\t \t \t \t \t \t var point \t = new google.maps.LatLng(parseFloat(val['lat']),parseFloat(val['lng']));
\t \t \t \t \t \t var name \t = val['name'];
\t \t \t \t \t \t var address \t = '<p>'+ val['address'] +'</p>';
\t \t \t \t \t \t var properties \t = val['properties'];
\t \t \t \t \t var id \t \t \t \t \t = val['id'];
\t \t \t \t \t
\t \t \t \t \t create_marker(point, name, address, false, false, "/images/pin_green.png", properties, id);
\t \t \t })
\t \t \t });
}
\t \t //############### Function create_marker ##############
\t \t
\t \t
\t \t function create_marker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, iconPath, properties, id) {
\t
\t var this_id = 'marker_' + id;
\t \t
\t \t //new marker
\t \t var marker = new google.maps.Marker({
\t \t \t id: this_id,
\t position: MapPos,
\t map: map,
\t draggable: DragAble,
\t animation: google.maps.Animation.DROP,
\t title: MapTitle,
\t icon: iconPath,
\t properties: properties
\t \t });
\t \t
\t \t //Content structure of info Window for the Markers
\t \t var contentString = $('<div class="marker-info-win">'+
\t \t '<div class="marker-inner-win"><span class="info-content">'+
\t \t '<h1 class="marker-heading">'+MapTitle+'</h1>'+
\t \t MapDesc+
\t \t '</span>'+
\t \t '</div></div>');
\t \t \t google.maps.event.addListener(marker, 'click', function(event) {
\t \t \t infowindow.setContent(contentString[0]);
\t \t \t infowindow.open(map, marker);
\t \t \t
\t \t \t //############### Send latlng to right panel ##############
\t \t \t
\t \t \t var mLatLang = marker.getPosition().toUrlValue(); //get marker position
\t \t \t showRightPanel(mLatLang);
\t \t \t
\t \t \t });
\t \t \t \t \t \t
\t \t \t \t markers.push(marker);
\t \t \t } \t \t
\t \t \t function showRightPanel(mLatLang) { //function that will add markers on button click
\t \t \t
\t var myData = {latlang : mLatLang}; //post variables
\t $.ajax({
\t type: "POST",
\t url: "<?=$urlpath?>map_show_panel.php",
\t data: myData,
\t success:function(data){
\t \t $('#marker_result').html(data);
\t },
\t error:function (xhr, ajaxOptions, thrownError){
\t \t alert(thrownError); //throw any errors
\t }
\t });
\t \t \t
\t \t \t }
정보창합니다 (DOM에 추가), 당신은 정상 자바 스크립트/JQuery와 방법을 사용할 수 있습니다 이미 열려있는 경우 HTML 요소에 액세스합니다. – geocodezip
아마도 내가 잘못된 질문을하고 있습니다. 마커와 연결된 내용을 업데이트 할 수 있기를 원합니다. 마커를 나중에 클릭하면 원래 content content = =로 설정된 콘텐츠가 아닌이 업데이트 된 내용이 표시됩니다. – Ashley
InfoWindow를 ajax 호출로 업데이트합니다. 그러나 이것은 내가 원하는 일이 아니며, 추가 호출이 필요하지 않은 것처럼 보입니다. 콘텐츠를 업데이트해야하는 경우에만 수행해야합니다 (매우 드물게) – Ashley