I am trying to display latitude and longitude on google maps. with my code i am getting empty box with google map.
Here is the div tag where i am displaying data.
<div id="map"></div>
Here is the button calling the locate function on html page
<td><button type="button" class="btn btn-primary" ng-click="MyMap(record.id ,record.coordinates)">{{record.coordinates}} </button>
Here is the Function throught which i am trying to display marker on the google map
$scope.MyMap=function(id,coordinates)
{
console.log(id,coordinates);
locate(coordinates);
}
function locate(coordinates) {
console.log(coordinates);
var myLatlng = new google.maps.LatLng(coordinates[1], coordinates[0]);
var map = new google.maps.Map(
document.getElementById("map"), {
center: myLatlng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
})
}
When i Click on the button I got the empty grey box in the map div. where is the problem