2013-07-04 68 views
-1

現在我的infowindow只顯示來自數據庫的字符串數據。但我想在infowindow中做點什麼。例如:我想做一個鏈接,可以鏈接到其他頁面或JavaScript代碼,可以顯示更多信息。這我的代碼:更復雜的infowindow谷歌地圖

function initialize(){ 
    var peta; 
    var gambar_tanda; 
    gambar_tanda = 'assets/images/enseval.jpg'; 
    var x = new Array(); 
    var y = new Array(); 
    var customer_name = new Array(); 
    var rayon_name = new Array(); 
    // posisi default peta saat diload 
    var lokasibaru = new google.maps.LatLng(-1.2653859,116.83119999999997); 
    var petaoption = { 
     zoom: 5, 
     center: lokasibaru, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption); 
     var infowindow = new google.maps.InfoWindow({ 
         content: '' 
     }); 
    // memanggil function ambilpeta() untuk menampilkan koordinat 
     url = "json.php"; 
     $.ajax({ 
     url: url, 
     dataType: 'json', 
     cache: false, 
     success: function(msg){ 
      for(i=0;i<msg.enseval.customer.length;i++){ 
       x[i] = msg.enseval.customer[i].x; 
       y[i] = msg.enseval.customer[i].y; 
       customer_name[i] = msg.enseval.customer[i].nama_customer; 
       //rayon_name[i] = msg.enseval.customer[i].nama_rayon 
       var point = new google.maps.LatLng(parseFloat(msg.enseval.customer[i].x),parseFloat(msg.enseval.customer[i].y)); 
       tanda = new google.maps.Marker({ 
          position: point, 
          map: peta, 
          icon: gambar_tanda, 
          clickable: true 
       }); 
// under this is the code of infowindow 
      bindInfoWindow(tanda, peta, infowindow, msg.enseval.customer[i].nama_customer ); 
      } 
     } 
     }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
function bindInfoWindow(tanda, peta, infowindow, data) { 
    google.maps.event.addListener(tanda, 'click', function() { 
    infowindow.setContent(data); 
    infowindow.open(peta, tanda); 
    }); 
} 
} 
</script> 

回答

1

你可以做這樣的事情,並添加HTML到信息窗口

address[i] = msg[i].address; 
        postal_code[i] = msg[i].postal_code; 
        var point = new google.maps.LatLng(parseFloat(msg[i].latitude),parseFloat(msg[i].longitude)); 
        var gambar_tanda = 'assets/images/'+msg[i].icon+'.png'; 
        var photo_cust ='<img src="assets/images/foto_cust/'+msg[i].cp_customer_site_use_id+'_1.jpg" style="width:200px;height:120px;"/>'; 
        var html = '<b>' + customer_name[i] + '</b><br/>'+city[i]+ ', '+address[i]+', '+postal_code[i]+'<br/>' + cp_rayon_name[i] + '<br/>' + photo_cust; 
在我的代碼
1

它很容易,因爲「infoWindow」只是HTML的一部分。

喜歡:

infowindow.content='<a href=http://www.google.com target=_blank>Google</a><br />' 
+'<input type=button onclick=yourAction('+opt1+','+opt2+') value=PressMe>'; 
+0

,內容是從JSON函數的值填充。我仍然可以用你的答案做什麼?什麼是+ opt1 + + opt2 +?你可以給我一個例子嗎?對不起,因爲我還是gmaps的新手。順便說一句,謝謝tcltk-d。 – Krichevskoy