Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Comment Utiliser l'API Google Maps

No description
by

Fabien DEQUINE

on 30 November 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Comment Utiliser l'API Google Maps

Comment utiliser l'API Google Maps dans un site Web ?
Google Maps Embed API
Google Static Maps API
Google Street
View Image API
Google Maps JavaScript API
Les
Pré-requis
https://developers.google.com/
Les différentes étapes
pour activer les API
Google Maps Embed
Comment
utiliser les
API ?

- Permer d'intégrer une carte intéractive avec une simple requête HTTP.
- Chaque utilisateur voit sa propre carte, si ils sont enregistrés avec leur compte Google, ils verront leurs lieux enregistrés, Domicile et Travail et d'autres directement intégrés dans la carte.
- Chaque utilisateur peut intéragir avec la carte, enregistrer la position, déterminier l'itinéraire et par exemple, lancer la navigation depuis un smartphone.
- Facile à intégrer dans une page Html en intégrant l'API Google Maps avec l'attribut
<iframe>
:
- Permet de créer une carte à partir de paramètres basées sur une URL via une requête HTTP, renvoie une carte comme une image fixe que l'on affiche dans une page Html.
- Google Maps Static API renvoie une image (GIF, PNG ou JPEG) en réponse à la requête HTTP.
- Il est possibe de personnaliser la carte, comme la taille, le niveau de zoom, le type de carte et l'ajout de marqueurs optionnels.
- Permet d'intégrer une image statique de Google Strret View.
- L'image est défini avec des paramètres dURL envoyé via une requête HTTP, une image fice (non-intéractive) est retournée sur une page Html.
- Il est possible de modifier l'angle de vue, la hauteur et le niveau de zoom de 'l'image.
API JavaScript qui permet d'utiliser un grand nombre de fonctinnalités pour personnaliser une carte Google Maps.
- Intégration de données pour construir des cartes dynamique avec des fonctinnalalités poussées tels que la géolocalisation, le
geocodage, la navigation GPS, calculs de distance, d'altitude etc...
- API très complète, nécessite des connaissanced en JavaScript et en programmation orienté objet.
Utiliser la console Google for Developers :
Créer / Choisir un projet
Activer les APIs
Générer une clé d'identication
Choix de la clé d'API
Création d'un projet.
Tableau de bord de la console
Google for developers
Les API Google disponibles
Panneau d'activation des API
Configuration des URL
pour les sites Web autorisés
La clé d'API pour les service
Google Maps est crée,
Création de la clé d'API
Appel de l'API Google dans une balise <
iframe>
et de son attibut
src,
l'URL prend donc la forme suivante :
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/
place
?key
=AIzaSyDApR0SwGFD1IhOMs8NK9vKvX1L9iS0N8A&amp;
q
=INRA+2+place+pierre+viala+Montpellier">
</iframe>
place :
est un mode d'affichage de la carte, il existe différents modes tels Place (par défaut), Directions, Search, View et Streetview.
key :
est la clé d'identification pour l'API
q :
paramètre qui définit le lieu ou sera situé la carte, il peut s'agir de coordonnées GPS, d'un nom de lieu, ou d'une adresse postale.
Appel de l'API dans une balise
<img>
et de son attribut
src,

on obtient donc l'URL suivante :
<img src="https://maps.googleapis.com/maps/api/staticmap?
center
=24+Chemin+de+Borde+Rouge,+31326+Castanet-Tolosan
&amp;
zoom
=17
&amp;
size
=640x480
&amp;
maptype
=roadmap
&amp;
markers
=color:blue%7Clabel:I|24+Chemin+de+Borde+Rouge,+31326+Castanet-Tolosan
&amp;
key
=AIzaSyDApR0SwGFD1IhOMs8NK9vKvX1L9iS0N8A" alt="carte"/>
center
:
définit le centre de la carte, prend en paramètre des coordonnées GPS (longitutude, latitude), ou une adresse sous forme d'une chaîne de caractère.
zoom

: définit le niveau de zoom de la carte.
size
:
définit la taille de l'image en px, la taille maximale est de 640x640.
maptype :
dédinit le type de carte à afficher, parmis les types on peut choisir le mode : roadmap, satellite, hybrid, ou terrain.
key
:
paramètre nécessaire pour renseiner la clé d'API.
Google Static Maps API
Google Street View Image API
L'URL Http est encapsulé dans une balise <img> sous la forme suivante :
<img src="https://maps.googleapis.com/maps/api/streetview?
location
=48.764425,2.171518
&amp;
size
=640x480
&amp;heading=120
&amp;fov=100
&amp;pitch=10
&amp;
key
=AIzaSyDApR0SwGFD1IhOMs8NK9vKvX1L9iS0N8A" alt="carte"/>
location :

Indique le lieu ou est généré l'image Street View, il peut s'agir d'une chaîne de caractère pour une adresse, ou de coordonnées GPS. - OU - on peut utiliser le paramétre pano avec un ID spécifique.
Ssze :
définit la taille de l'image en px, la taille maximale est de 640x640.
key :
paramètre nécessaire pour renseiner la clé d'API.
heading
: paramètre qui indique l'angle horizontale de la vue. Valeur comprise entre 0 - 360. Les deux valeurs indiquant le Nord, 90 l'Est, et 180 le Sud.
fov
: exprime le zoom qui l'on peut faire dans l'image. La valeur par défaut 90, Max. : 120.
pitch :
désigne l'angle haut/bas de la prise de vue. La valeur par défaut est 0, 90 indique le haut, -90 indique le bas.
Google Maps JavaScript API
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API</title>

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

</head>

<body>
<div id="map"></div>
<script type="text/javascript">
var map;
var myLatLng = {lat: 43.1555091, lng: 2.9964284};

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom:16
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'C\'est Ici !'
});
}

</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEEdtCp4Tv336mDvB4NzsxMIY_ejbEkw4&amp;callback=initMap">
</script>



</body>
</html>
Un petit exemple simple :
1 - On déclare l'application comme étant une page Html5 avec la balise <!DOCTYPE html>
2 - On crée une <div> avec l'i'd map
3 - On définit la fonction JavaScript qui ve généré la carte dans la balise <div>
4 - On charge l'API Maps JavaScript
L'API permet un éventail de possibilités, ex : modifier la couleur des éléments affichés sur la carte, le géocoding, la géolocalistaion,
la gestion d'itinéraire avec prise en harge du traffic, etc...
Full transcript