ReferenceError: google is not defined

[igler]

I get the error "ReferenceError: google is not defined" before the function onGoogleReady() is called. I load your module like this:

<script type="text/javascript" src="bower_components/angular-ui-utils/modules/event/event.js "></script>
<script type="text/javascript" src="bower_components/angular-ui-map/src/map.js"></script>
<script src="${pageContext.request.contextPath}/web/views/js/mapController.js"></script>
<script type="text/javascript" charset="utf-8" async="async" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>

If I do not use the attribute async when loading the GoogleAPI I get:

Uncaught TypeError: Cannot call method 'appendChild' of null 

which is called in the line

document.body.appendChild(s);

of Google's js-script.

If I take the following Google-API-script:

<script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

and the controller

var myMapsApp = angular.module('myMapsApp', [ 'restangular', 'ui.map', 'ui.event' ]);

function onGoogleReady() {
    console.log('onGoogleReady...');

    //angular.bootstrap(document.getElementById("map"), [ 'app.ui-map' ]);
}

angular.module('myMapsApp').controller('MapController', [ '$scope', function($scope) {

    $scope.mapOptions = {
        center : new google.maps.LatLng(35.784, -78.670),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
} ]);

... then the maps is displayed but I don't have a callback function registered. Is there any demo-page I could use to solve this?

[facuferrari]

Check out that you have no ng-app defined in you .html because angular it's going to load the module before you call you load it in the angular.bootstrap() method

[igler]

Thanx, got it working now. BTW the zoom-in-out panel is crippled. I fixed this with

.map-canvas img{ 
    max-width: none;
}

Maybe you can add this to your introduction?

As I use the map in a bootstrap-accordion for presenting some locations (around 30) loading the page takes its time I wonder what concepts I could use to make it more performant. Maybe use a map service? Have you any experiences/sample code that you could share?

[facuferrari]

I've didn't use the zoom panel with this. And for the performance maybe you could put the libraries in your project and user requirejs optimization ?

[igler]

I am trying to set a marker. The HTML-code is:

<section id="map">
<div ui-map="myMap" ui-options="$parent.getMapOptions(location.latitude, location.longitude)" ui-map-marker="$parent.getMarker(location.latitude, location.longitude, location.name)" class="map-canvas-locations"></div>
</section>

But I get an error "Converting circular structure to JSON" when adding the "ui-map-marker"-attribute. The code of the marker function is:

$scope.getMarker = function(latitude, longitude, name) {
        return {
              position: new google.maps.LatLng(latitude, longitude),
              map: $scope.myMap,
              title: name
          };
    };

Is the way I do it correct?

[sugir93]

hi getting the same error, because of the internet issue i guess.... but because of this issue my app is getting crash sometime.... any solution for this????