Click here to Skip to main content
15,313,725 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.
HTML
<div id="map"></div>




Here is the button calling the locate function on html page

HTML
<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

CSS
$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
Posted
Comments
Sreekanth Mothukuru 6-Dec-15 12:42pm
   
Were you able to see google map?
DotNetSteve 6-Dec-15 14:27pm
   
any error message from Google? Any issues with including the googlemaps javascript on page? Your key correct etc?
George Jonsson 6-Dec-15 23:08pm
   
You need to show your angular module and controller code too.
This is too little information to be able to recreate your problem.
Have you tried to debug using F12?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900