Les bases de Google Maps
Google Maps Bases
Création d'une carte Google simple
Créons maintenant une carte Google simple.
Voici une carte Google montrant Londres, Royaume-Uni :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Instance en cours d'exécution»
Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne
Exemple d'analyse
Nous utilisons l'exemple ci-dessus pour analyser le processus de création de Google Maps.
Pourquoi l'application devrait-elle déclarer HTML5 ?
La plupart des navigateurs utilisent les pages de rendu de documents HTML5 en "mode standard", qui signifie que votre application est compatible avec tous les principaux navigateurs.
De plus, s'il n'y a pas de balise DOCTYPE, le navigateur utilisera le mode mixte (mode quirks) pour restituer le contenu de la page.
Conseils : A noter que certains CSS en "mode mixte" ne peuvent pas être utilisés en mode standard. Dans une application spécifique, toutes les tailles basées sur un pourcentage doivent être héritées de l'élément de bloc parent. Si aucune taille n'est spécifiée dans le module parent, la valeur par défaut est 0 x 0 pixels. Si vous souhaitez utiliser des pourcentages, vous pouvez le déclarer dans la balise <style> comme ceci :
html {height:100 % }
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
Ce style instruction Indique que le module cartographique (GoogleMap) doit La hauteur HTML est de 100 %.
Ajouter une clé API Google Maps
Dans l'exemple suivant, l'API Google Maps doit être incluse dans la première balise <script> :
Placez la clé API générée par google dans le paramètre key (key=YOUR_API_KEY).
Le paramètre sensor est obligatoire et précise si l'application utilise un capteur (similaire à la navigation GPS) pour localiser l'emplacement de l'utilisateur. La valeur du paramètre peut être définie sur vrai ou faux.
HTTPS
Si votre application est une application HTTP sécurisée (HTTPS : HTTP Secure), vous pouvez utiliser HTTPS pour charger Google API de carte :
Chargement asynchrone
De même, nous pouvons également charger l'API Google Maps une fois la page complètement chargée.
L'exemple suivant utilise window.onload pour charger Google Maps une fois la page complètement chargée. La fonction loadScript() crée la balise de chargement <script> de l'API Google Maps. Également à la fin de la balise ajoutée callback=paramètre initialize, initialize() en tant que fonction de rappel sera exécutée une fois l'API complètement chargée :
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
</body>
</html>Instance en cours d'exécution »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Définir les attributs de la carte
Avant d'initialiser la carte, nous devons pour créer un objet d'attribut de carte pour définir certaines propriétés de la carte :
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
center (point central)
L'attribut center spécifie le centre de la carte, qui transmet les coordonnées (latitude, longitude) pour créer un point central sur la carte.
Zoom (niveau de zoom)
L'attribut zoom précise le niveau de zoom de la carte. zoom : 0 affiche le zoom complet de la carte entière de la Terre.
MapTypeId (le type initial de la carte)
L'attribut mapTypeId spécifie le type initial de la carte.
mapTypeId comprend les quatre types suivants :
google.maps.MapTypeId.HYBRID : affiche la couche transparente d'images satellite de la rue principale
-
google.maps.MapTypeId.ROADMAP : Afficher un plan de rue ordinaire
google.maps.MapTypeId.SATELLITE : Afficher une image satellite
google.maps.MapTypeId.TERRAIN : affiche des cartes avec des caractéristiques naturelles telles que le terrain et la végétation
Où afficher Google Maps
Généralement, Google Maps est utilisé dans les éléments <div> :
Remarque : La carte affichera la taille de la carte en fonction de la taille définie dans le div, nous pouvons donc définir la taille de la carte dans l'élément <div>
Créer un objet Map
,mapProp);
Le code ci-dessus utilise le paramètre (mapProp) pour créer une nouvelle carte dans l'élément <div> (l'identifiant est googleMap).
Astuce : Si vous souhaitez créer plusieurs cartes dans la page, il vous suffit d'ajouter de nouveaux objets cartographiques.
L'exemple suivant définit quatre instances de carte (les quatre cartes utilisent des types de cartes différents) :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Charger la carte
Chargement de la fenêtre Initialisez ensuite l'objet Map en exécutant la fonction initialize(), qui garantit que Google Maps est chargé une fois la page complètement chargée :
