Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Calque Fusion Tables (Experimental)

  1. Présentation
  2. Limites
  3. Configuration des tableaux Fusion Table
  4. Construction d'un calque FusionTables
  5. Requêtes Fusion Table
  6. Styles Fusion Table
  7. Cartes thermiques Fusion Table

Remarque : Le calque Fusion Tables est en version expérimentale (Experimental).

Le calque Fusion Tables offre un rendu des données contenues dans les tableaux Google Fusion Tables.

Présentation

Google Maps JavaScript API vous permet d'afficher un rendu des données contenues dans Google Fusion Tables en tant que calque sur une carte au moyen de l'objet FusionTablesLayer. Un tableau Google Fusion Table est une table de base de données dans laquelle chaque ligne contient des données sur une caractéristique particulière. Pour les données géographiques, chaque ligne d'un tableau Google Fusion Table contient par ailleurs des données géolocalisation indiquant la position de la caractéristique. L'objet FusionTablesLayer fournit une interface vers les tableaux Fusion Tables et prend en charge le rendu automatique de ces données géolocalisation, en fournissant des superpositions cliquables qui affichent les données supplémentaires d'une caractéristique.

Un exemple de tableau Fusion Table indiquant des données géographiques est fourni ci-dessous :

Limites

Vous pouvez utiliser Google Maps JavaScript API pour ajouter jusqu'à cinq calques Fusion Tables à une carte, l'un d'entre eux pouvant être stylisé en utilisant jusqu'à cinq règles de stylisation.

Par ailleurs :

  • Seules les 100 000 premières lignes de données d'un tableau peuvent être mappées ou incluses dans les résultats d'une requête.
  • Les requêtes avec prédicats spatiaux ne renvoient que les données contenues dans ces 100 000 premières lignes. En conséquence, si vous appliquez un filtre à un tableau très important et que ce filtre renvoie des données contenues dans des lignes situées après ces 100 000 premières lignes, ces lignes ne s'afficheront pas.
  • Lorsque vous importez ou insérez des données, rappelez-vous des points suivants :
    • La taille totale des données envoyées dans un appel API ne peut pas dépasser 1 Mo.
    • Une cellule de données dans un tableau Fusion Tables prend en charge un million de caractères maximum. Il peut donc parfois s'avérer nécessaire de réduire la précision des coordonnées ou de simplifier la description des polygones ou des lignes.
    • Le nombre maximum de sommets pris en charge par tableau est de cinq millions.
  • Lorsque vous regardez la carte, vous pouvez observer ce qui suit :
    • Les dix zones les plus étendues d'une multi-géométrie sont affichées.
    • Lorsque l'on effectue un zoom arrière, les tableaux avec plus de 500 caractéristiques affichent des points (et non des lignes ou des polygones).

Configuration des tableaux Fusion Table

Les tableaux Fusion Tables sont des tables de données qui fournissent une prise en charge intégrée des données géographiques. Pour plus d'informations, voir À propos de Fusion Tables. Pour qu'un calque Fusion Tables affiche les données dans l'API sur une carte Google, le tableau doit satisfaire aux critères suivants :

  • Le tableau doit être partagé avec le statut Public ou Unlisted.
  • Le tableau doit présenter une ou plusieurs colonnes Location. Dans l'interface Web Fusion Tables, sélectionnez Edit > Modify Columns et sélectionnez la ou les colonnes souhaitées.

La colonne Location doit respecter les règles de formatage ci-dessous.

  • Les coordonnées de latitude/longitude peuvent être saisies dans une même colonne, séparées par une virgule (latitude,longitude) ou divisées en deux colonnes (une pour la latitude et l'autre pour la longitude). Pour plus d'informations, voir la documentation sur les tableaux Fusion Tables.
  • Les adresses doivent d'abord être géocodées. Dans l'interface Web Fusion Tables, sélectionnez File > Geocode.
  • Les données géométriques KML telles que les points, les lignes et les polygones sont pris en charge.

Construction d'un calque FusionTables

Le constructeur FusionTablesLayer permet de créer un calque à partir d'un tableau Fusion Tables public en utilisant l'identifiant chiffré du tableau, accessible sous File > About dans l'interface utilisateur Fusion Tables.

Pour ajouter un calque Fusion Tables à votre carte, créez le calque en spécifiant un objet query avec les propriétés suivantes :

  • Une propriété select, dont la valeur est le nom de la colonne contenant les informations de géolocalisation. Vous devez utiliser des guillemets autour des noms de colonne contenant des espaces ou des mots réservés, ou qui ne commencent pas par une lettre.
  • Une propriété from, dont la valeur est l'un des identifiants chiffrés.

Définissez ensuite le paramètre map de votre calque sur votre objet Map, comme avec n'importe quelle autre superposition.

Remarque : Dans les versions antérieures de Google Maps JavaScript API, tout tableau Fusion Table était désigné par son identifiant numérique. Cette méthode reste valide, mais la méthode de l'identifiant chiffré est désormais à privilégier.

L'exemple suivant illustre les homicides à Chicago en 2009 au moyen d'un tableau Fusion Table public :

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

Voir l'exemple de tableau Fusion Table

Requêtes Fusion Table

Les tableaux Fusion Tables vous permettent également d'appliquer des requêtes efficaces pouvant limiter un ensemble de résultats à un critère donné. Les requêtes sont spécifiées au moyen d'un paramètre FusionTablesLayerOptions query :

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

où la colonne locationColumn est une colonne géocodée existante de type Location. Si les champs select ou where contiennent des espaces ou des mots réservés ou s'ils ne commencent pas par une lettre, vous devez utiliser des guillemets autour des noms de colonne.

Les opérateurs de recherche pris en charge sont indiqués dans la documentation sur les tableaux Fusion Tables.

L'exemple suivant montre les points géographiques qui, le long de la ligne rouge de la Régie des transports de Chicago, avaient un trafic supérieur à 5 000 passagers en semaine :

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

Voir l'exemple de tableau Fusion Table

Styles Fusion Table

Le constructeur de calques Fusion Tables accepte également le paramètre FusionTablesLayerOptions styles pour appliquer différentes couleurs, différentes épaisseurs de trait et différents degrés d'opacité aux lignes et aux polygones. Des icônes de marqueur peuvent également être spécifiés à partir des noms de marqueur de carte ou d'icône pris en charge.

Remarque : Les styles ne peuvent être appliqués qu'à un seul calque Fusion Tables par carte. Vous pouvez appliquer jusqu'à cinq styles à ce calque.

Le paramètre styles utilise la syntaxe suivante :

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Les styles sont appliqués par-dessus tout paramètre de style spécifié dans l'interface Web Fusion Tables. Les styles fournis au constructeur de calques sont ensuite appliqués dans l'ordre dans lequel ils sont spécifiés. Si un élément satisfait à plusieurs règles, c'est le dernier style correspondant qui lui est appliqué.

Pour créer un style par défaut à appliquer à tous les éléments, créez un style sans clause where :

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

L'exemple suivant montre :

  • Un style par défaut qui colore en vert tous les polygones, avec un degré d'opacité de 0.3.
  • Tous les polygones dont la colonne « birds » dépasse 300 sont colorés en bleu. Ils conservent le degré d'opacité défini par le style par défaut.
  • Le degré d'opacité de tous les polygones dont la colonne « population » dépasse 5 est défini sur 1.0. Ces polygones conservent leurs valeurs fillColor.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

Voir l'exemple de tableau Fusion Table

Cartes thermiques Fusion Table

Les calques Fusion Tables offrent une prise en charge limitée des cartes thermiques, où la densité des points géographiques correspondants est illustrée au moyen d'une palette de couleurs. Les cartes thermiques actuelles utilisent un gradient allant du rouge (dense) au vert (rare) pour indiquer la prévalence relative des points géographiques associés. Pour activer une carte thermique, définissez le paramètre FusionTablesLayerOptions heatmap du calque sur enabled: true.

Remarque : Le rendu des cartes thermiques Fusion Tables est effectué côté serveur. Si vous préférez des cartes thermiques côté client, utilisez plutôt le calque Heatmap.

L'exemple suivant montre des données historiques de séismes au moyen d'une carte thermique :

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

Voir l'exemple de tableau Fusion Table

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.