Javascript 谷歌地图api不工作？

Angularjs谷歌地图api不工作我不知道我在控制台中检查了什么错误我在控制台中没有收到错误如何解决这个问题。我附上了fiddle

angular.module（'myApp'，[]）
.controller（'MapCtrl'[
“$scope”、“$http”、“$compile”，
函数（$scope、$http、$compile）{
//-------------------------------------------------------------------------------------------------------------------------------------------------
$scope.find=函数（）{
var gmarkers1=[]；
var markers1=[]；
var infowindow=new google.maps.infowindow({
内容：“”
});
//我们的标记
标记1=[
[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']
];
/**
*函数初始化映射
*/
函数初始化（）{
var center=new google.maps.LatLng（12.9667,77.5667）；
变量映射选项={
缩放：12，
中心:中心,，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
对于（i=0；i

请选择类别
第二
汽车
第三
添加此

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


#地图画布{
宽度：500px；
高度：500px；
}
map container元素没有维度，但它们是map api进行渲染所必需的。我应该如何显示地图？给出
map canvas
元素的高度和宽度