Latest web development tutorials

base de Google Maps

Créer un simple Google Maps

Maintenant, nous allons créer un simple Google Maps.

Ce qui suit est un graphique montrant la Google Maps Londres:

Exemples

<!DOCTYPE html>
<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>

Essayez »

Des exemples d'analyses

Dans l'exemple ci-dessus, nous créons un processus pour résoudre la carte Google.

Pourquoi devrait déclarer le HTML5 d'application?

<!DOCTYPE html>

La plupart des navigateurs utilisent le «modèle standard» de HTML5 rendre le document de page, ce 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 que vous utilisez le mode promiscuous (mode quirks) pour rendre le contenu de la page.

Astuce: Il est à noter que certains "mode promiscuité" dans le CSS et vous ne pouvez pas utiliser le mode standard.Dans une application particulière, tous doivent hériter d'éléments de bloc de parents sur la base d'un pourcentage de la taille. Si vous ne spécifiez pas la taille du module dans le parent, la valeur 0 x 0 pixels par défaut. Si vous voulez utiliser des pourcentages, peut être déclaré dans la balise <style>, comme suit:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Ce module de déclaration de style carte show (GoogleMap) devrait être la hauteur HTML de 100%.

Ajouter Google Maps API Key

Dans l'exemple suivant la première balise <script> doit être inclus dans Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

La clé API Google généré placé dans les paramètresclés(key= YOUR_API_KEY).

Le paramètre de détection est nécessaire, le paramètre est utilisé pour indiquer si l'application utilise un capteur (similaire à la navigation GPS) pour localiser l'emplacement de l'utilisateur.Les valeurs des paramètres peuvent être réglés pour vrai ou faux.

HTTPS

Si votre application est HTTP sécurisé (HTTPS: HTTP sécurisé) l'application, 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 également charger l'API Google Maps après que la page soit entièrement chargée.

L'exemple suivant utilise window.onload pour mettre en œuvre complètement chargé lorsque la page est chargée de Google Maps. loadScript () crée charger l'API Google Maps <script> tag. En outre, à la fin de l'étiquette pour le rappel = initialiser les paramètres, initialize () sera exécutée après l'API est entièrement chargé en tant que la fonction de rappel:

Exemples

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

Essayez »

Custom Map Propriétés

Avant d'initialiser la carte, nous avons besoin de créer un objet de la carte pour définir la propriété propriétés de la carte:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

centre (centre)

attribut Centre spécifie le centre de la carte, qui par des coordonnées (latitude, longitude) pour créer un point central sur la carte.

Zoom (Zoom Series)

propriété zoom zoom de la carte indique le nombre d'étapes. zoom: 0 montrer la pleine échelle de la carte entière de la Terre.

MapTypeId (carte de type initial)

attribut type mapTypeId spécifie la carte initiale.

mapTypeId comprend les quatre types suivants:

  • google.maps.MapTypeId.HYBRID: les images satellites montrent la rue principale de la couche transparente
  • google.maps.MapTypeId.ROADMAP: afficher le plan normale
  • google.maps.MapTypeId.SATELLITE: Afficher une image satellite
  • google.maps.MapTypeId.TERRAIN: affiche des cartes avec des caractéristiques physiques (telles que la topographie et de la végétation) de

Où afficher Google Maps

Généralement utilisé dans Google Maps élément <div>:

<div id="googleMap" style="width:500px;height:380px;"></div>

Note: La taille dela carte sera div définie pour indiquer la taille de la carte, afin que nous puissions définir la taille de la carte dans l'élément <div>.

Créer un objet cartographique

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

Le code ci-dessus utilise le paramètre (mapProp) dans l'élément <div> (id est googleMap) crée une nouvelle carte.

Astuce: Si vousvoulez créer plusieurs pages de carte, il vous suffit d'ajouter de nouveaux objets de la carte peuvent être.

L'exemple suivant définit quatre cartes d'instance (cartes en utilisant quatre types de cartes différentes):

Exemples

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);

Essayez »

Chargement de la carte

Carte fenêtre afin d'initialiser l'objet après le chargement en exécutant la fonction initialize (), qui assure que la page soit entièrement chargée avant le chargement des Google Maps:

google.maps.event.addDomListener(window, 'load', initialize);