-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathShowDataOnMaps.html
110 lines (95 loc) · 4.79 KB
/
ShowDataOnMaps.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!--
Here, we will see how to import GeoJSON data from either a local or remote source, and display
it on your map.
##############################
Loading data from same domain
##############################
The Google Maps Data Layer provides a container for arbitrary geospatial data (including GeoJSON).
If your data is in a file hosted on same domain as your Maps JavaScript API application, you can
load it using the map.data.loadGeoJson() method. The file must be on same domain, but you can
host it in a different subdomain. For example, you can make a request to files.example.com from
www.example.com.
map.data.loadGeoJson('data.json');
###############################
Loading data across domains
###############################
You can also request data from a domain other than your own, if the domain's configuration allows
such as request. The standard for this permission is called "Cross-origin resource sharing (CORS)".
If a domain has allowed cross-domain requests, its response header should include following
declaration:
Access-Control-Allow-Origin: *
Loading data from such a domain is the same as loading JSON from the same domain:
map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');
#####################
Requesting JSONP
#####################
The target domain must support requests for JSONP in order to use this technique.
To request JSONP, use createElement() to add a script tag to the head of your document.
var script = document.createElement('script');
script.src = 'url to jsonp';
document.getElementsByTagName('head')[0].appendChild(script);
When script runs, the target domain passes the data as an argument to another script,
usually named callback(). The target domain defines the callback script name, which is the
first name on the page when you load the target URL in a browser.
You must define the callback script in your code:
function eqfeed_callback(response) {
map.data.addGeoJson(response);
}
Use the addGeoJson() method to place the parsed GeoJSON data on map.
You can change the appearance of your data by adding GeoJSON data to Map object
GeoJSON is widely used open format for encoding geographic data, based on JSON. JavaScript
tools and methods designed for JSON data also work with GeoJSON.
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 different domain.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Importing or Showing Data in Google Maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<style type="text/css">
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h3>Google Map with imported data</h3>
<div id="map"></div>
<script type="text/javascript">
var map;
// initMap function initializes and adds map when the web page loads.
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 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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgncHEhehCiKENUJB0y19GURax6WXqk&callback=initMap" async defer></script>
</body>
</html>