Présentation
Découvrez comment importer des données GeoJSON à partir d'une source locale ou distante, et les afficher sur votre carte. Ce tutoriel utilise la carte ci-dessous pour illustrer différentes techniques d'importation de données dans des cartes.
La section ci-dessous affiche l'intégralité du code nécessaire pour créer la carte dans ce tutoriel.
TypeScript
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 2,
center: new google.maps.LatLng(2.8, -187.3),
mapTypeId: "terrain",
});
// Create a <script> tag and set the USGS URL as the source.
const script = document.createElement("script");
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src =
"https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
document.getElementsByTagName("head")[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results: any) {
for (let i = 0; i < results.features.length; i++) {
const coords = results.features[i].geometry.coordinates;
const latLng = new google.maps.LatLng(coords[1], coords[0]);
new google.maps.Marker({
position: latLng,
map: map,
});
}
};
declare global {
interface Window {
initMap: () => void;
eqfeed_callback: (results: any) => void;
}
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
JavaScript
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 2,
center: new google.maps.LatLng(2.8, -187.3),
mapTypeId: "terrain",
});
// Create a <script> tag and set the USGS URL as the source.
const script = document.createElement("script");
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src =
"https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
document.getElementsByTagName("head")[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results) {
for (let i = 0; i < results.features.length; i++) {
const coords = results.features[i].geometry.coordinates;
const latLng = new google.maps.LatLng(coords[1], coords[0]);
new google.maps.Marker({
position: latLng,
map: map,
});
}
};
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
HTML
<html>
<head>
<title>Earthquake Markers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Essayer l'exemple
Charger les données
Cette section explique comment charger des données à partir du même domaine que votre application API Maps JavaScript ou d'un autre domaine.
Charger des données à partir du même domaine
Le calque de données Google Maps fournit un conteneur pour les données géospatiales arbitraires (y compris GeoJSON). Si vos données se trouvent dans un fichier hébergé sur le même domaine que votre application API Maps JavaScript, vous pouvez les charger à l'aide de la méthode map.data.loadGeoJson(). Le fichier doit se trouver sur le même domaine, mais vous pouvez l'héberger dans un autre sous-domaine. Par exemple, vous pouvez envoyer une requête à files.example.com depuis www.example.com.
map.data.loadGeoJson('data.json');
Charger des données à partir d'un autre domaine
Vous pouvez également demander des données à un domaine autre que le vôtre, si sa configuration le permet. Cette norme d'autorisation est appelée Cross-Origin Resource Sharing (CORS). Si un domaine autorise les requêtes interdomaines, son en-tête de réponse doit inclure la déclaration suivante :
Access-Control-Allow-Origin: *
Utilisez les outils pour les développeurs Chrome (DevTools) pour savoir si un domaine a activé le CORS.
Pour charger des données qui se trouvent dans un tel domaine, procédez comme pour charger des données JSON issues du même domaine :
map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');
Demander du JSONP
Le domaine cible doit prendre en charge les requêtes pour du JSONP afin que vous puissiez utiliser cette technique.
Pour demander du JSONP, utilisez createElement() pour ajouter un tag script à l'en-tête de votre document.
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);
Lorsque le script s'exécute, le domaine cible transmet les données en tant qu'argument à un autre script, généralement appelé callback(). Le domaine cible définit le nom du script de rappel, qui est le premier nom de la page lorsque vous chargez l'URL cible dans un navigateur.
Par exemple, chargez http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp dans la fenêtre de votre navigateur pour afficher le nom du rappel en tant que eqfeed_callback.
Vous devez définir le script de rappel dans votre code :
function eqfeed_callback(response) {
map.data.addGeoJson(response);
}
Utilisez la méthode addGeoJson() pour placer les données GeoJSON analysées sur la carte.
Styliser les données
Vous pouvez modifier l'apparence de vos données en ajoutant des données GeoJSON à un objet de carte. Consultez le guide du développeur pour savoir comment styliser vos données.
En savoir plus
- GeoJSON est un format ouvert basé sur JSON (JavaScript Object Notation) couramment utilisé pour encoder les données géographiques. Les outils et méthodes JavaScript conçus pour les données JSON fonctionnent également avec GeoJSON. Pour en savoir plus, consultez le guide du développeur.
- JSONP signifie JSON padded (c'est-à-dire un JSON enrichi d'une fonction JavaScript). Il s'agit d'une méthode de communication utilisée dans les programmes JavaScript qui s'exécutent dans des navigateurs Web pour demander des données à un serveur situé dans un autre domaine.