My last comment was a rather hasty one. The script worked on an old, slow
laptop. I t did not work on a newer, faster one.
But now the issue is solved.
The problem is,that the script markerManager depends on a fully loaded
Goggle Maps Api. The attributes defer did not do the job. Defer means, that
a script is loaded, after the page was parsed, but not,that other scripts
are fully loaded.
The issue is solved by:
- in the callback initMap: wait until Google Maps Api is fully loaded
- initialyze the map and other scripts
- load the dependent script markerManager dynamically.
function initMap() {
var timer = setInterval(function () {
//wait until document is fully loaded
if (/interactive|complete/.test(document.readyState)) {
clearInterval(timer);
if (!isOnline()) {
return;
}
setMap();
initialize();
downloadScript();
}
}, 10);
}
function downloadScript() {
var element = document.createElement("script");
element.type = 'text/javascript';
element.src = "lib/markermanager.js";
document.body.appendChild(element);
}
Am Samstag, 9. April 2016 14:13:55 UTC+2 schrieb Bost:
>
> Hallo,
> I solved this issue.
> The script markermanager.js depends on the GoogleMapsApi, which is loaded
> asynchronously with the attribute defer. That means, that it is executed,
> when the page has finished parsing. markermanager.js is fetched and
> executed immediately, before the browser continues parsing the page.
> Adding the defer attribute to loading markermanager.js solved this issue.
>
> Replace
> <script type="text/javascript" src="lib/markermanager.js" ></script>
> by
> <script *defer* type="text/javascript" src="lib/markermanager.js"
> ></script>
>
>
>
>
>
> Am Donnerstag, 7. April 2016 18:54:56 UTC+2 schrieb Bost:
>>
>> 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.
