angular google map api не работает?

Question

Angularjs Google Map API не работает я Доно, что ошибка я проверил в консоли я не получаю сообщение об ошибке в консоли, как решить эту problem.I прилагает скрипку http://jsfiddle.net/yqpx2/530/

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'); 
 
\t \t \t 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(); 
 
//-------------------------------------------------------------------------------------------------------------------------------------------------- 
 
} 
 
}]);

<div ng-app="myApp" 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

добавить этот

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