Les bases de Google Maps
Créer une carte Google simple
Créons maintenant une simple carte Google.
Voici une carte Google montrant Londres, Royaume-Uni:
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <script> function initialize () {var mapprop 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.adddddddddddddddddddddd (Feed ', "Feed', Load '. initialiser); </cript> </ head> <body> <div id = "googlemap"> </div> </body> </html>Exemple de rendus (peut être copié et exécuté directement, bien sûr, vous devez pouvoir accéder à Google)
Exemple d'analyse
Nous utilisons l'exemple ci-dessus pour analyser le processus de création de Google Maps.
Pourquoi une demande déclare-t-elle HTML5?
<! Doctype html>
La plupart des navigateurs utilisent des pages de rendu de document HTML5 "Mode standard", ce qui signifie que votre application est compatible avec les principaux navigateurs.
De plus, s'il n'y a pas de balise doctype, le navigateur utilise le mode Quirks pour rendre le contenu de la page.
CONSEIL: Il convient de noter que des CSS de «mode promiscuité» ne peuvent pas être utilisés avec le mode standard. Dans des applications spécifiques, toutes les tailles basées sur le 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 de 0 x 0 pixels. Si vous souhaitez utiliser des pourcentages, vous pouvez les déclarer dans la balise <ystyle> comme suit:
<style type = "text / css"> html {hauteur: 100%} corps {hauteur: 100%; marge: 0; padding: 0} #googlemap {hauteur: 100%} </ style>Cette instruction de style indique que le module MAP (GoogleMap) doit avoir une hauteur HTML de 100%.
Ajouter la clé de l'API Google Maps
L'API Google Maps doit être incluse dans la première balise <cript> dans l'exemple suivant:
<script src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </ script>
Placez la touche API générée par Google dans le paramètre de clé (key = your_api_key).
Le paramètre du capteur est requis, ce qui indique 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 True ou False.
Https
Si votre application est une application HTTP sécurisée (HTTPS: HTTP Secure), vous pouvez utiliser HTTPS pour charger l'API Google Maps:
<script src = "https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </ script>
Chargement asynchrone
De même, nous pouvons charger l'API Google Maps une fois la page entièrement chargée.
L'exemple suivant utilise Window.onLoad pour obtenir une charge complète de Google Maps. La fonction LoadScript () crée la balise API <Script> de chargement Google Maps. De plus, le paramètre callback = initialize est ajouté à la fin de la balise. L'initialisation () comme la fonction de rappel sera exécutée après que l'API soit entièrement chargée:
Exemple
<! DocType Html> <html> <éadfr> <cript> 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=inialize"; document.body.appendChild (script);} window.onLoad = Loadscript; </cript> </ head> <body> <div id = "googlemap"> </div> </odody> </html>Définir les propriétés de la carte
Avant d'initialiser la carte, nous devons créer un objet de propriété de carte pour définir certaines propriétés de carte:
var mapprop = {Center: new Google.maps.latlng (51.508742, -0.120850), zoom: 7, mapTypeid: google.maps.maptypeid.roadmap};Centre (point central)
La propriété centrale spécifie le centre de la carte, qui crée un point central sur la carte par des coordonnées (latitude, longitude).
Zoom (série de zoom)
La propriété Zoom spécifie la plage de zoom de la carte. Zoom: 0 montre le zoom complet de toute la carte terrestre.
MapTypeid (le type initial de la carte)
La propriété MapTypeid spécifie le type initial de la carte.
MapTypeid comprend les quatre types suivants:
google.maps.maptypeid.hybrid: la couche transparente de la rue principale qui affiche l'image satellite
google.maps.maptypeid.Roadmap: afficher la carte de rue normale
google.maps.maptypeid.satellite: afficher l'image satellite
google.maps.maptypeid.terrain: montrez des cartes avec des caractéristiques naturelles telles que le terrain et la végétation
Où afficher Google Maps
Habituellement, Google Maps est utilisé dans des éléments <v>:
<div id = "googlemap"> </div>
Remarque: La carte affichera la taille de la carte avec la taille définie dans le div, afin que nous puissions définir la taille de la carte dans l'élément <v>.
Créer un objet de carte
var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);
Le code ci-dessus utilise le paramètre (Mapprop) pour créer une nouvelle carte dans l'élément <v> (ID est GoogleMap).
Conseil: si vous souhaitez créer plusieurs cartes sur la page, il vous suffit d'ajouter un nouvel objet MAP.
L'exemple suivant définit quatre instances de carte (quatre cartes utilisent différents types de cartes):
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <script> function initialize () {var mapprop 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> </div id = "googlemap2"> </v> <br> <div Id = "googlemap2"> </v> <br> <div> id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </ody> </html>Chargement de la carte
Une fois la fenêtre chargée, l'objet MAP est initialisé en exécutant la fonction initialisée (), qui garantit que Google Maps est chargé après le chargement de la page:
google.maps.event.adddomListener (Window, «Load», initialize);
Ce qui précède est une compilation des informations de base de Google Maps. Nous continuerons à l'ajouter plus tard. Merci pour votre soutien à ce site!