Google Maps v3 infoWindow addDomListener untuk Tombol HTML

Saya punya contoh File JS Google Maps sederhana:

    /*Standard Setup Google Map*/ 
    var latlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
        zoom: 15, 
        center: latlng, 
        panControl: false,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    // add Map 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // add Marker
    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-25.363882,131.044922)
    });

    // add Info Window
    var infoWindow = new google.maps.InfoWindow();

Sekarang saya ingin membuka Kotak info ketika saya mengklik tombol di template html saya:

Berkas HTML:

<body onload="initialize()">
 ...
 <div id="map_canvas"></div>
 ...
 <button id="test">Click</button>
 ...
</body>

menambahkan baris ini ke File JS saya:

    var onMarkerHTMLClick = function() {

        var marker = this;
        var latLng = marker.getPosition();
        var content = '<div style="text-align: center; font-size:14px;"><center><b>Company GmbH</b></center><div>Broadway Str.5</div><div>45132 Canvas</div></div>';

        map.panTo(marker.getPosition());
        map.setZoom(15);

        infoWindow.setContent(content);

        infoWindow.open(map, marker);
     };

    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });

    google.maps.event.addDomListener(document.getElementById("test"),'click', onMarkerHTMLClick);

error: marker.getPosition bukan fungsi mengapa ini tidak berfungsi? Jika saya melakukan hal yang sama dengan fungsi klik pada penanda itu sendiri, jendela terbuka tanpa masalah..


google-maps javascript google-maps-api-3 infowindow
person Jim    schedule 14.10.2013    source sumber
comment
Tombol bukan penanda?   -  person Alex Gill    schedule 14.10.2013

Jawaban (1)


arrow_upward
1
arrow_downward

Anda perlu memicu acara yang membuka infoWindow. Mungkin hal termudah untuk dilakukan adalah menyimpan penanda Anda dalam array global atau jika Anda tidak punya banyak, cukup pilih berdasarkan ID.

Contoh

var myButton = document.getElementById('THE_ID');
google.maps.event.addDomListener(myButton, 'click', openInfoWindow);

openInfoWindow hanya menjadi fungsi panggilan balik tempat Anda dapat memicu peristiwa tersebut.

person Alex Gill    schedule 14.10.2013
comment
ah oke ini akan berhasil dan saya harus menyetel var marker = marker1; dari pada var marker = ini; - person Jim; 14.10.2013