谷歌地图信息窗口按钮没有传递值？

Question

When i click marker i am getting details in info window but in that info window i have one button when i click that button it should pass id like 0,1,2,3 based on user click. Error:When i click that button i am getting Uncaught ReferenceError: getid is not defined how to solve this problem? i have enclosed my fiddle http://jsfiddle.net/yqpx2/531/

 angular.module('myApp', []) .controller('MapCtrl', [ '$scope', '$http', '$compile', function($scope, $http, $compile) { //------------------------------------------------------------------------------------------------------------------------------------------------- $scope.find = function(){ var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); // Our markers markers1 = [ ['0', 'Madivala', 12.914494, 77.560381, 'car','as12'], ['1', 'Majestic', 12.961229, 77.559281, 'third','as13'], ['2', 'Ecity', 12.92489905, 77.56070772, 'car','as14'], ['3', 'Jp nagar', 12.91660662, 77.52047465, 'second','as15'] ]; /** * Function to init map */ function initialize() { var center = new google.maps.LatLng(12.9667,77.5667); var mapOptions = { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[1]; var fullContent = marker.slice(1,6).join(); var marker1 = new google.maps.Marker({ title: title, position: pos, category: category, map: map }); gmarkers1.push(marker1); // Marker click listener google.maps.event.addListener(marker1, 'click', (function (marker1, idx, markers1) { return function () { console.log('Gmarker 1 gets pushed'); var compiled = '<div><div>' +markers1[idx][0] + ' </div><div>' + markers1[idx][1] + ' </div><div>' +markers1[idx][2] + ' </div><div><button onclick="getid(markers1[' + idx + '][5])">Get</button></div></div>'; var infowindow = new google.maps.InfoWindow({ content: compiled }); infowindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1,i, markers1)); } function getid(id) { console.log(id) } /** * Function to filter markers by category */ filterMarkers = function (category) { for (i = 0; i < markers1.length; i++) { marker = gmarkers1[i]; // If is same category or category not picked if (marker.category == category || category.length === 0) { marker.setVisible(true); } // Categories don't match else { marker.setVisible(false); } } } // Init map initialize(); } }]); 

 <style type='text/css'> #map-canvas { width: 500px; height: 500px; } </style> 

 <div ng-controller="MapCtrl" ng-init="find()"> <div id="map-canvas"></div> <select id="type" onchange="filterMarkers(this.value);"> <option value="">Please select category</option> <option value="second">second</option> <option value="car">car</option> <option value="third">third</option> </select> </div> 

Answer 1

The onclick event only works on elements that already exist but you're trying to use it on something dynamically generated. To bind an event to a dynamically generated element you should use jquery's .on() .

You could do something like this:

var compiled = '<div><div>' +markers1[idx][0] + ' </div><div>' + markers1[idx][1] + ' </div><div>' +markers1[idx][2] + ' </div><div><button id="' +  markers1[idx][5] + '">Get</button></div></div>';

and replace the getId() function by :

$(document.body).on('click', 'button', function() {
    console.log(this.id);
});

Hope this will help.