CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsiismime-types
Kubi
Kubi

Reputation: 2169

Google MAP API Key in Angular App

I have an angular app and trying to add a simple google map to a page. But I'm getting this:

> Google Maps API is required. Please register the following JavaScript
> library http://maps.google.com/maps/api/js?sensor=true. <div
> data-ui-view="" class="ng-scope">(anonymous function) @
> angular.js:11598$get @ angular.js:8548$ @ angular.js:8219v @
> angular.js:7726g @ angular.js:7075(anonymous function) @
> angular.js:6954k @ angular-ui-router.min.js:7k.compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075g @ angular.js:7078(anonymous function) @
> angular.js:6954compile @ angular-ui-router.min.js:7$ @
> angular.js:8217v @ angular.js:7726g @ angular.js:7075(anonymous
> function) @ angular.js:6954k @ angular-ui-router.min.js:7k.compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954compile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954k @
> angular-ui-router.min.js:7(anonymous function) @
> angular-ui-router.min.js:7$get.l.$broadcast @
> angular.js:14707x.transitionTo.x.transition.I.then.x.transition.x.transition
> @ angular-ui-router.min.js:7(anonymous function) @
> angular.js:13175$get.l.$eval @ angular.js:14388$get.l.$digest @
> angular.js:14204(anonymous function) @ angular.js:14427e @
> angular.js:4902(anonymous function) @ angular.js:5282
> js?sensor=true&_=1435321003344:8 Failed to execute 'write' on
> 'Document': It isn't possible to write into a document from an
> asynchronously-loaded external script unless it is explicitly opened.

The page below is a sample I downloaded from https://codeload.github.com/hpneo/gmaps/ and the weird thing is that it works OK if I browse it over http://myapp/directroy/map.html but it's giving me the error above if I want to reach there over http://myapp/ng-route-to-map-page

I tried to register the javascript sdk over code.google.com and include the library into the page as

Am I doing this wrong? I put the API Key to there

<script type="text/javascript" src="http://maps.google.com/maps/api/js?&key=APIKEY"></script>

But still getting the same error. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Geometry overlays</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

  <script type="text/javascript" src="../gmaps.js"></script>
  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <script type="text/javascript">
    var map, rectangle, polygon, circle;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
      });
      var bounds = [[-12.030397656836609,-77.02373871559225],[-12.034804866577001,-77.01154422636042]];
      rectangle = map.drawRectangle({
        bounds: bounds,
        strokeColor: '#BBD8E9',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#BBD8E9',
        fillOpacity: 0.6
      });

      var paths = [[-12.040397656836609,-77.03373871559225],[-12.040248585302038,-77.03993927003302],[-12.050047116528843,-77.02448169303511],[-12.044804866577001,-77.02154422636042]];
      polygon = map.drawPolygon({
        paths: paths,
        strokeColor: '#25D359',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#25D359',
        fillOpacity: 0.6
      });
      var lat = -12.040504866577001;
      var lng = -77.02024422636042;
      circle = map.drawCircle({
        lat: lat,
        lng: lng,
        radius: 350,
        strokeColor: '#432070',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#432070',
        fillOpacity: 0.6
      });
      for(var i in paths){
        bounds.push(paths[i]);
      }
      var b = [];
      for(var i in bounds){
        latlng = new google.maps.LatLng(bounds[i][0], bounds[i][1]);
        b.push(latlng);
      }
      for(var i in paths){
        latlng = new google.maps.LatLng(paths[i][0], paths[i][1]);
        b.push(latlng);
      }
      map.fitLatLngBounds(b);
    });
  </script>
</head>
<body>
  <h1>GMaps.js &mdash; Geometry overlays</h1>
  <div class="row">
    <div class="span11">
      <div id="map"></div>
    </div>
    <div class="span6">
      <p>You can draw geometry overlays (which can be a polygon or a rectangle or a circle):</p>
      <pre>polygon = map.drawRectangle({
  bounds: bounds,
  strokeColor: '#BBD8E9',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#BBD8E9',
  fillOpacity: 0.6
});
polygon = map.drawPolygon({
  paths: paths,
  strokeColor: '#25D359',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#25D359',
  fillOpacity: 0.6
});
circle = map.drawCircle({
  lat: lat,
  lng: lng,
  radius: 350,  //350 meters
  strokeColor: '#432070',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#432070',
  fillOpacity: 0.6
});</pre>
      <p>Be careful with the settings as they are not the same for each overlay.</p>
    </div>
  </div>
</body>
</html>

Upvotes: 0

Views: 15938

Answers (3)

RobSeg
RobSeg

Reputation: 1035

If you want to use a Google map inside an Angular application you should use the Angular google maps directive.

Simply install using bower

bower install angular-google-maps

Load scripts in your HTML page

Note that the API key provided by Google can be specified at the tail end of the maps.googleapis script reference.

<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js?key=123...'></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

Inject dependency in your app 

angular.module('myApplicationModule', ['uiGmapgoogle-maps']);

Add a map to your scope

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

And add a map to your template, done!

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

Don't forget to specify height in your CSS

.angular-google-map-container { height: 400px; }

You don't have to specify API key but if you don't, expect to see:

NoApiKeys developers.google.com/maps/documentation/javascript/…

Upvotes: 3

neaumusic
neaumusic

Reputation: 10454

Taken from a similar question

Specify &callback=yourCallback in the api request and document.write won't get called, where

window["yourCallback"] = function () {}; // compiler minified dot notation for me

Either that, or have the http://maps.googleapis.com/maps/api/js script tag inside of your HTML as it's getting parsed the first time, like in a newly constructed iframe or server response as a string.

I believe it's the network request "referrer" which is checked against your &client=yourClientID and &signature=yourHMACSHA1EncodedSignature, so make sure your window.location.href matches the request header if you're going to sign it. document.referrer in an iframe will show the parent frame's url unless they block it (security concern for some sites)

document.write would clear your document if it happened at a later time, so it's prevented

Upvotes: 0

Kubi
Kubi

Reputation: 2169

OK. My problem here was I was referencing the maps api twice. Once in my parent page and also in the map page -child- I included it in resolve.

Once I removed the one in the parent page, my problem resolved. Maybe, it helps others having the same issue. Just check the references. On the other hand, I don't find it proper to give an error such as Google Maps API is required. Please register the following JavaScript in my situation.

Upvotes: 0

Related Questions