2017-10-05 138 views
-1

是否有可能針對特定標記的InfoWindow更新它?Google Maps API v3 - 如何更新標記的InfoWindow

單擊標記時,將打開顯示名稱和地址的InfoWindow。它還將Lat和Long發送到PHP腳本,以便從地圖上的div中的數據庫中獲取有關此Marker的更多詳細信息。

我希望能夠更新名稱和地址使用這個離開地圖的div,這是沒有問題的 - 我堅持如何針對特定標記的InfoWindow來更新它與新的名稱和地址,雖然。

我已經爲每個標記添加了一個標識,但我不知道如何使用它(或者如果可能的話)以該標識爲目標標記,並從發送信息的其他函數更新其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 }

+0

如果信息窗口已打開(添加到DOM),你可以使用普通的JavaScript/jQuery方法訪問它中的HTML元素。 – geocodezip

+0

也許我在問錯誤的問題。我希望能夠更新與標記相關聯的內容,因此如果稍後點擊標記,它將顯示此更新的內容,而不是最初使用var contentString =設置的內容.... – Ashley

+0

我已經完成了解決方法我用ajax調用更新了infoWindow,但這並不是我想要發生的事情,它似乎是一個額外的調用,沒有必要,我只需要在內容需要更新時執行它(很少) – Ashley

回答

0

假設infoWindow' is your infoWindow object you can change the content of an infoWindow if you can access (you have visibility of the infoWindow object) using setContent()`如:

infoWindow.setContent('your new content'); 
相關問題