Hallo,
thanks for your quick response.
For inheritance I followed this article:
https://developers.google.com/maps/documentation/javascript/customoverlays?hl=de#initialize
They prefer this:
ProjectionHelperOverlay.prototype = new google.maps.OverlayView();
Not Object.create.
Here are the main parts of my code;
<!DOCTYPE html>
<html>
<head>
<script *async* defer type="text/javascript"
src="
https://maps.google.com/maps/api/js?language=de&key=MyKey&callback=*initMap*";>
</script>
<script type="text/javascript" src="lib/routeMain.js" ></script>
<script type="text/javascript" src="lib/markermanager.js" ></script>
<script type="text/javascript" src="other javascript files"></script>
</head>
<body>
</body>
</html>
File routeMain.js:
var map;
var markerMgr;
function initMap(){
//indicates that Google Maps Api is loaded
//this event happens before event DOMContentLoaded happened
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
//called, when html and scripts are loaded.
initialize();
});
function initialize() {
//loads the map
var latlng = new google.maps.LatLng(51.31893, 9.49601); //Kassel,
Germany
var myOptions = {
zoom: 7,
center: latlng,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
markerMgr = new MarkerManager(map);
}
File MarkerManager.js:
function MarkerManager(map, opt_opts) {
var me = this;
me.map_ = map;
me.projectionHelper_ = new ProjectionHelperOverlay(map);
google.maps.event.addListener(me.projectionHelper_, 'ready', function
() {
me.projection_ = this.getProjection();
me.initialize(map, opt_opts);
});
function ProjectionHelperOverlay(map) {
* this.setMap(map); //*method of google.maps.OverlayView
this._map = map;
this._zoom = -1;
this._X0 =
this._Y0 =
this._X1 =
this._Y1 = -1;
}
// ProjectionHelperOverlay inherits from google.maps.OverlayView
ProjectionHelperOverlay.prototype = new google.maps.OverlayView();
/**
* Draw function only triggers a ready event for
* MarkerManager to know projection can proceed to
* initialize.
*/
ProjectionHelperOverlay.prototype.draw = function () {
if (!this.ready) {
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
};
}
When the app is loaded asynchronously I got the Error in
ProjectionHelperOverlay(map)
this.setMap is not a function.
When stepping slowly with the debugger, sometimes the app works correctly.
So I assume there will be a timing problem.
When loading synchronously the app worked correctly.
------------------------------------------------------------------------------------------------------------------
Am Mittwoch, 6. April 2016 17:34:44 UTC+2 schrieb barryhunter:
>
>
>
>> ProjectionHelperOverlay.prototype = new google.maps.OverlayView();
>>
>
> That's not really correct. THat is creating the prototype as one
> 'instance' of OverlayView. (It runs the function, and stores the result -
> its is an object, but its not complete)
>
> Been a while since done inheritance, with the API, but something like this
>
> ProjectionHelperOverlay.prototype =
> Object.create(google.maps.OverlayView.prototype);
>
> See also
>
> http://stackoverflow.com/questions/9812783/cannot-inherit-google-maps-map-v3-in-my-custom-class-javascript
>
>
>
>>
>> When I load GoogleMapsApi synchronously the app works with no error.
>>
>>
> Sounds like your code is running before the API has been fully loaded.
>
> But its hard to guess, without seeing your code.
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.
