更复杂的infowindow谷歌地图

时间:2013-07-04 08:59:10

标签: javascript google-maps-api-3 infowindow

现在我的infowindow只显示来自数据库的字符串数据。但我想在infowindow做点什么。示例:我想创建一个链接,可以链接到其他页面或javascript代码,可以显示更多信息。这是我的代码:

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>

2 个答案:

答案 0 :(得分: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>';

答案 1 :(得分:1)

你可以做这样的事情并将html添加到infowindow

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;