Google map not showing using AngularJS but the images are being downloaded - google-maps

Question

This is my angular js directive through which I am trying to display code:
"use strict";
app.directive('geomap', function () {
return {
restrict:'E',
link:function (scope, elem, attrs) {
scope.$watch(attrs.ngModel, function (v) {
var geoBoardlocation = v;
if (v != undefined) {
var ICON = new google.maps.MarkerImage('medicare.png', null, null,
new google.maps.Point(14, 13));
var SHADOW = new google.maps.MarkerImage('medicare-shadow.png', null, null,
new google.maps.Point(14, 13));
google.maps.event.addDomListener(window, 'load', function () {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center:new google.maps.LatLng(37.7, -122.2),
zoom:4,
streetViewControl:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
});
var panelDiv = document.getElementById('panel');
var data = new MedicareDataSource(geoBoardlocation);
var view = new storeLocator.View(map, data, {
geolocation:false,
features:data.getFeatures()
});
view.createMarker = function (store) {
console.log(store.getDetails());
var markerOptions = {
position:store.getLocation(),
icon:'medicare.png',
shadow:'medicare-shadow.png',
title:store.getDetails().title
};
return new google.maps.Marker(markerOptions);
}
var infoBubble = new InfoBubble;
view.getInfoWindow = function (store) {
if (!store) {
return infoBubble;
}
var details = store.getDetails();
var html = ['<div class="store"><div class="title">', details.title,
'</div><div class="address">', details.address, '</div>',
'<div class="hours misc">', details.hours, '</div></div>'].join('');
infoBubble.setContent($(html)[0]);
return infoBubble;
};
new storeLocator.Panel(panelDiv, {
view: view,
directions: false,
});
});
}
});
}
};
});
However using this the map doesn't show up. Any idea why would that happen? I can see map images being downloaded in Network tab in Chrome however the map doesn't show up.

Answer 1

Can you check url # https://github.com/angular-ui/ui-map and Angular UI Implementation of Google Map
This directive allows you to add Google Maps JavaScript API elements in angularJS