Google maps laad niet soepel moet met settimeout
gmaps.js waar de map word aangemaakt en de functies worden geladen.
Code (php)
In mijn footer heb ik dit staan:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script src="<?=HTML_ROOT?>js/script.js" defer></script>
<script src="<?=HTML_ROOT?>js/markerclusterer.js"></script>
<?php
require_once(DOC_ROOT.'inc/gmapjs.php');
?>
<script src="<?=HTML_ROOT?>js/markerclusterer.js"></script>
<?php
require_once(DOC_ROOT.'inc/gmapjs.php');
?>
in script.js roep ik google maps aan met een callback
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.addEventListener('DOMContentLoaded', function () {
if (document.querySelectorAll('#map').length > 0)
{
if (document.querySelector('html').lang)
lang = document.querySelector('html').lang;
else
lang = 'en';
var js_file = document.createElement('script');
js_file.type = 'text/javascript';
js_file.src = 'https://maps.googleapis.com/maps/api/js?v=3.28&callback=initMap&key=xxxxxxxxxxxxxxxxxxxxxxx&language=' + lang+' async defer';
document.getElementsByTagName('head')[0].appendChild(js_file);
}
});
var map;
if (document.querySelectorAll('#map').length > 0)
{
if (document.querySelector('html').lang)
lang = document.querySelector('html').lang;
else
lang = 'en';
var js_file = document.createElement('script');
js_file.type = 'text/javascript';
js_file.src = 'https://maps.googleapis.com/maps/api/js?v=3.28&callback=initMap&key=xxxxxxxxxxxxxxxxxxxxxxx&language=' + lang+' async defer';
document.getElementsByTagName('head')[0].appendChild(js_file);
}
});
var map;
Daarnaast een hoop andere problemen, zoals een grijs vlak of als ik buiten de wereld 'drag', dan is hij grijs, dat heb ik verholpen met:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
google.maps.event.addListener(map, 'drag', function(){
var proj =map.getProjection();
var bounds = map.getBounds();
var sLat =map.getBounds().getSouthWest().lat();
var nLat = map.getBounds().getNorthEast().lat();
if (sLat < -85 || nLat > 85) {
// alert('Gray area visible');
map.setOptions({
center: new google.maps.LatLng(
1.469260 , // set Latitude for center of map here
1.582031) // set Langitude for center of map here
});
// Map.fitBounds(boundsNew); Or Define bound that u want show
}
});
var proj =map.getProjection();
var bounds = map.getBounds();
var sLat =map.getBounds().getSouthWest().lat();
var nLat = map.getBounds().getNorthEast().lat();
if (sLat < -85 || nLat > 85) {
// alert('Gray area visible');
map.setOptions({
center: new google.maps.LatLng(
1.469260 , // set Latitude for center of map here
1.582031) // set Langitude for center of map here
});
// Map.fitBounds(boundsNew); Or Define bound that u want show
}
});
Wat kan ik nu doen dat hij laad zonder de settimeouts te gebruiken?
Er zijn nog geen reacties op dit bericht.