Showing Marker on the Map

See more:

Javascript

AngularJs

google-api

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