Exemple Google Hello de l'API Google Maps
Un simple bonjour guide du monde pour afficher Google Maps sur une page Web, viaGoogle Maps Javascript API v3.
Dans ce didacticiel, nous vous montrons comment afficher une carte centrée sur «Malim Nawar, Malaisie» (ma ville natale) et utiliser «marqueur (petite icône)» pour identifier l'emplacement sur la carte.
Exemple complet…
Google Map Hello World Example
Voir l'explication suivante.
1. Où afficher Google map
Google map va s'afficher sur l'ID d'élément «map_container».
//... //...
2. Charger l'API Google Maps
Pour utiliser l'API Google Maps, il vous suffit d'inclure le code JavaScript suivant dans votre page Web.
What is sensor?
Capteur (normalement, capteur de téléphone portable) est utilisé pour déterminer l'emplacement de l'utilisateur.
3. Latitude et longitude
Chaque emplacement sur la Terre peut être représenté par la latitude et la longitude ou ce qu'on appelle «geographic coordinates», reportez-vous à cewiki geographic coordinate pour plus d'explications.
Note
Personnellement, je ne comprends pas vraiment comment fonctionnent la latitude et la longitude, en termes simples, pensez simplement à la latitude avec la coordonnée y et la longitude avec la coordonnée x. J'apprécierais si quelqu'un explique plus à ce sujet :)
Dans cet exemple, vous pouvez trouver la latitude et la longitude de «Malim Nawar» via celatitude and longitude finder website. Ensuite, mettez votre latitude et longitude comme ceci «var latlng = new google.maps.LatLng(Latitude, Longitude)».
Geocoding
Le processus de conversion d'une adresse en «latitude et longitude» est appelé géocodage. Nous fournirons plus d'exemples de géocodage dans les prochains tutoriels.
4. Configurer les options de Google Maps
Les valeurs configurables sont explicites. Reportez-vous à cette référence pour la liste desGoogle map options pris en charge.
Affichez la carte Google dans l'ID d'élément HTML nommé «map_container».
function loadMap() {
//...
var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
//...
}
Créez un marqueur (petite icône), configurez la position d'affichage et la boîte de message prédéfinie lorsque vous passez la souris sur le marqueur.
function loadMap() {
//...
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"my hometown, Malim Nawar!"
});
//...
}
5. Charger Google Maps
Dernière étape, chargez simplement la fonction via la surcharge du corps.