Professional Documents
Culture Documents
Importing Data Into Maps - Maps JavaScript API - Google Developers
Importing Data Into Maps - Maps JavaScript API - Google Developers
Overview
Learn how to import GeoJSON data (#data) from either a local or remote source, and display it on your map. This tutorial uses the map
below to illustrate various techniques to import data into maps.
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 1/8
19/3/2020 Importing Data into Maps | Maps JavaScript API | Google Developers
The section below displays the entire code you need to create the map in this tutorial.
heck out the NYC Subway Locator solution (https://developers.google.com/maps/solutions/store-locator/nyc-subway-locator?hl=es-419) to see another examp
GeoJSON data with maps.
Try it yourself
You can experiment with this code in JSFiddle by clicking the <> icon in the top-right corner of the code window.
CTYPE html>
l>
ead>
<style>
/* 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;
}
</style>
head>
ody>
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 2/8
19/3/2020 Importing Data into Maps | Maps JavaScript API | Google Developers
<div id="map"></div>
<script>
var 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.
var 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.
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
</script>
<script async defer
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 3/8
19/3/2020 Importing Data into Maps | Maps JavaScript API | Google Developers
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
body>
ml>
Loading data
This section shows you how to load data from either the same domain as your Maps JavaScript API application, or from a different one.
data.loadGeoJson('data.json');
You can also request data from a domain other than your own, if the domain's con guration allows such a request. The standard for this
permission is called Cross-origin resource sharing (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) (CORS). If a domain has allowed
cross-domain requests, its response header should include the following declaration:
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 4/8
19/3/2020 Importing Data into Maps | Maps JavaScript API | Google Developers
ss-Control-Allow-Origin: *
Use the Chrome Developer Tools (DevTools) (https://developer.chrome.com/devtools#console) to nd out if a domain has enabled CORS.
Loading data from such a domain is the same as loading JSON from the same domain:
data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');
Requesting JSONP
The target domain must support requests for JSONP (#JSONP) in order to use this technique.
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 5/8
19/3/2020 Importing Data into Maps | Maps JavaScript API | Google Developers
your browser loads any code that returns as a script, you should only request JSONP from a domain that you trust. In general, JSONP is replaced by CORS
ding_data_across_domains); the latter is much safer and should be your preferred choice if both are available.
To request JSONP, use createElement() to add a script tag to the head of your document.
script = document.createElement('script');
pt.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
ment.getElementsByTagName('head')[0].appendChild(script);
When the script runs, the target domain passes the data as an argument to another script, usually named callback(). The target domain
de nes the callback script name, which is the rst name on the page when you load the target URL in a browser.
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 6/8
19/3/2020 Importing Data into Maps | Maps JavaScript API | Google Developers
tion eqfeed_callback(response) {
p.data.addGeoJson(response);
Use the addGeoJson() method to place the parsed GeoJSON data on the map.
You can change the appearance of your data by adding GeoJSON data to a Map object. Read the developer's guide for more information
on styling your data (https://developers.google.com/maps/documentation/javascript/datalayer?hl=es-419#style_geojson_data).
Learn more
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 7/8
19/3/2020 Importing Data into Maps | Maps JavaScript API | Google Developers
GeoJSON is a widely used open format for encoding geographic data, based on JSON (JavaScript Object Notation). JavaScript tools
and methods designed for JSON data also work with GeoJSON. Read the developer's guide
(https://developers.google.com/maps/documentation/javascript/datalayer?hl=es-419#load_geojson) for more information.
JSONP stands for padded JSON. It is a communication method used in JavaScript programs that run in web browsers, to request
data from a server in a different domain.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License (https://creativecommons.org/licenses/by/4.0/),
and code samples are licensed under the Apache 2.0 License (https://www.apache.org/licenses/LICENSE-2.0). For details, see the Google Developers Site Policies
(https://developers.google.com/site-policies?hl=es-419). Java is a registered trademark of Oracle and/or its a liates.
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419 8/8