Click here to Skip to main content
15,663,154 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.
<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.coordinates)">{{record.coordinates}} </button>

Here is the Function throught which i am trying to display marker on the google map



    function locate(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
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