谷歌地圖上的信息框內的按鈕應該是可點擊的

Question

我目前正在使用谷歌地圖API。一切工作正常，但我已經在信息框中插入了一個按鈕，我希望該按鈕應該是可點擊的。這裏是我的代碼

<script type="text/javascript"> 

    var secheltLoc = new google.maps.LatLng(19.0399503, 72.8414602), 
     markers, 
      myMapOptions = { 
      zoom: 13, 
      center: secheltLoc, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      ,mapTypeControl: true, 
       mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
        position: google.maps.ControlPosition.BOTTOM_CENTER 
       }, 
       panControl: true, 
       panControlOptions: { 
        position: google.maps.ControlPosition.TOP_RIGHT 
       }, 
       zoomControl: true, 
       zoomControlOptions: { 
        style: google.maps.ZoomControlStyle.LARGE, 
        position: google.maps.ControlPosition.TOP_RIGHT 
       }, 
       scaleControl: true, 
       streetViewControl: true, 
       streetViewControlOptions: { 
        position: google.maps.ControlPosition.TOP_RIGHT 
       } 
     }, 
     map = new google.maps.Map(document.getElementById("map"), myMapOptions); 

    function initMarkers(map, markerData) { 
     var newMarkers = [], 
      marker; 

     for(var i=0; i<markerData.length; i++) { 
      marker = new google.maps.Marker({ 
       map: map, 
       position: markerData[i].latLng, 
       visible: true, 
       icon:'images/marker.png' 
      }), 
      boxText = document.createElement("div"); 
     boxText.style.cssText = "border: 1px solid black; margin-top: -102px; background:black; padding: 5px; position:absolute; top:13px; left:112px; width:100%;"; 
     boxText.innerHTML = "<div class='infotext'>"+markerData[i].address +",<br>"+markerData[i].state+"</div><br><input class='yellow support_addr' location_id='"+markerData[i].location_id+"' type='button' value='Support'/><input class='yellow' type='button' value='Share'/>"; 
      infoboxOptions = { 
       content: boxText 
       ,disableAutoPan: false 
       ,maxWidth: 0 
       ,pixelOffset: new google.maps.Size(-100, -70) 
       ,zIndex: null 
       ,boxStyle: { 
        background: "url('images/tipbox.png') left 94% no-repeat" 
        ,opacity: 0.9 
        ,width: "22%" 
        ,top:"69.282167px" 
        ,left:"523.446926px" 
       } 
       ,closeBoxMargin: "10px 2px 2px 2px" 
       ,closeBoxURL: "http://localhost/faod_app/images/close.gif" 
       ,infoBoxClearance: new google.maps.Size(1, 1) 
       ,pane: "floatPane" 
       ,enableEventPropagation: true 
      }; 

      newMarkers.push(marker); 
      //define the text and style for all infoboxes 

      //Define the infobox 
      newMarkers[i].infobox = new InfoBox(infoboxOptions); 
      //Open box when page is loaded 
      //newMarkers[i].infobox.open(map, marker); 
      //Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates 
      //a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function, 
      //the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that 
      //serves the same purpose) is often needed when setting function callbacks inside a for-loop. 






      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 

       for (var j = 0; j < newMarkers.length; j++) 
       { 
        var currentMarker = newMarkers[j]; 
        newMarkers[j].infobox.close(map,currentMarker); 
        console.log(currentMarker); 
       } 


        newMarkers[i].infobox.open(map, this); 
        //map.panTo(markerData[i].latLng); 
       } 
      })(marker, i)); 

     } 

     return newMarkers; 
    } 

    //here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable 

    <?php 
      $query = "SELECT 
         * 
        FROM 
         location_submitted 
        WHERE 
         is_active = '1' 
        "; 

      //echo $query;exit; 
      $queryexecute = mysqli_query($db,$query); 

      $count_no = @mysqli_num_rows($queryexecute); 


      $string = ''; 
      $geo_array = array(); 

      $i = 1; 

      ?>   


    markers = initMarkers(map, [ 
     <?php 
       while($res = mysqli_fetch_assoc($queryexecute)) 
       { 
        //alert($res); 

        if($count_no == $i) 
        { 
         $comma = ''; 
        } 
        else 
        { 
         $comma = ','; 
        } 

        $string .= '["'.$res['location'].'","'.$res['city'].'",'.$res['latitude'].','.$res['longitude'].']'.$comma; 

        array_push($geo_array,$res['latitude'],$res['longitude']); 

        $i++;   

     ?> 

     { latLng: new google.maps.LatLng(<?php echo $res['latitude'].','.$res['longitude']?>), address: "<?php echo $res['location']?>", state: "<?php echo $res['city'];?>",location_id:"<?php echo $res['location_id']?>" }<?php echo $comma;?> 

     <?php 
       } 
     ?> 


    ]); 

</script> 

我試過這個解決方案Magnific-popup fails to open from button inside Google Maps infoBox，但它在我的情況下，它不能正常工作。

編輯： -

我還添加以下我的for循環，但裏面什麼都沒有代碼發生： -

window.google.maps.event.addListener(newMarkers[i], "domready", function() { 
       $('.support_addr').on('click', function() { 
        alert(); 
       }); 
      }); 

編輯： -JSFIDDLE

請幫我在這，在此先感謝

Answer 1

DEMO FIDDLE

您可能需要在文件級綁定事件作爲你在飛行裝箱HTML元素。

這樣的：

$(document).on("click",".support_addr",function() { 
    alert(); 
}); 

我updated your fiddle