Comment Charger Dynamiquement Google Maps (Plans)
De temps en temps on a besoin de charger dynamiquement Google Maps (Plans), mais quand on essaie de le faire, on a quelques problèmes et ne sait pas comment les fixer. Voilà un moyen de charger dynamiquement Google Maps.
La solution est la suivante: vous pouvez initier votre carte de manière simple, comme vous le faites habituellement et vous devez rendre cette carte invisible.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA"></script>
<script>
function initialize() {
var prop = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("w3docs-map"), prop);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="w3docs-map" style="width:500px;height:380px;"></div>
</body>
</html>
Maintenant, rendons la carte invisible, en y affichant le style de CSS display: none. Ensuite, nous allons effectuer une action pour charger la carte par n'importe quel événement.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA"></script>
<script>
var map;
function initialize() {
var prop = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("w3docs-map"), prop);
}
setTimeout(function(){
map = initialize();
},500);
function w3Load(){
document.getElementById("w3docs-map").style.display = 'block';
google.maps.event.trigger(map, 'resize');
}
</script>
</head>
<body>
<div id="w3docs-map" style="width:500px;height:380px;display: none"></div>
<button onclick="w3Load()">Charger la Carte</button>
</body>
</html>