2018/6/17

webgis-hands-on/01.md at master · hajime-miyauchi/webgis-hands-on

hajime‑miyauchi / webgis‑hands‑on
Branch: masterwebgis‑hands‑on / googlemapsapi / 01.md

hajime‑miyauchi Update 01.md
1 contributor
48 lines (38 sloc)

Find file Copy pathbac2dd1

2 days ago

787 Bytes

地図を表示してみよう
http://play.mylab.jp/webgis‑hands‑on/googlemapsapi/sample‑1‑1/index.html
index.html<!DOCTYPE html><html><head><link rel="stylesheet" href="main.css"></head><body><div id="map"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="main.js"></script><script src="https://maps.googleapis.com/maps/api/js?key=<API>&callback=initMap" async defer></script></body></html>main.js
var map = null;function initMap() {map = new google.maps.Map($('#map').get(0), {center: {lat: 35.172899, lng: 136.887531},zoom: 15});}

main.css
body {
margin: 0;
padding: 0;}#map {
height: 100vh;
width: 100vw;}

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/googlemapsapi/01.md

1 / 18 ページ

1/1

2018/6/17

webgis-hands-on/02.md at master · hajime-miyauchi/webgis-hands-on

hajime‑miyauchi / webgis‑hands‑on
Branch: masterwebgis‑hands‑on / googlemapsapi / 02.md

hajime‑miyauchi Update 02.md
1 contributor
68 lines (54 sloc)

Find file Copy pathbf02a30

2 days ago

1.35 KB

地図に図形を表示してみよう
http://play.mylab.jp/webgis‑hands‑on/googlemapsapi/sample‑2‑1/index.html
index.htmlとmain.cssは変更なし
main.js'strict'
var map = null;function initMap() {map = new google.maps.Map($('#map').get(0), {center: {lat: 35.172899, lng: 136.887531},zoom: 15});++ // circle+ var circle_coordinate = {lat: 35.174044, lng: 136.892795};+ var circle = new google.maps.Circle({+map: map,+center: circle_coordinate,+radius: 100+ });}さらに下記のようにすることで複数図形を描画できる。
http://play.mylab.jp/webgis‑hands‑on/googlemapsapi/sample‑2‑2/index.html
main.js'strict'var map = null;function initMap() {map = new google.maps.Map($('#map').get(0), {center: {lat: 35.172899, lng: 136.887531},zoom: 15});+++++++++// circle
var circle_coordinate = {lat: 35.174044, lng: 136.892795};
var circle = new google.maps.Circle({map: map,center: circle_coordinate,radius: 100
var circle_coordinates = [{lat: 35.174044, lng: 136.892795},{lat: 35.168431, lng: 136.886906},{lat: 35.166475, lng: 136.881477},];
circle_coordinates.forEach(function(coordinate){
var circle = new google.maps.Circle({map: map,

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/googlemapsapi/02.md

2 / 18 ページ

1/2

2018/6/17

webgis-hands-on/02.md at master · hajime-miyauchi/webgis-hands-on+++

center: coordinate,radius: 100});});}

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/googlemapsapi/02.md

3 / 18 ページ

2/2

2018/6/17

webgis-hands-on/03.md at master · hajime-miyauchi/webgis-hands-on

hajime‑miyauchi / webgis‑hands‑on
Branch: masterwebgis‑hands‑on / googlemapsapi / 03.md

hajime‑miyauchi Update 03.md
1 contributor
72 lines (61 sloc)

Find file Copy path45f2f1e

2 days ago

1.25 KB

図形の情報を外部から読み込もう
http://play.mylab.jp/webgis‑hands‑on/googlemapsapi/sample‑3‑1/index.html
index.htmlとmain.cssは変更なし
main.js'strict'
var map = null;function initMap() {map = new google.maps.Map($('#map').get(0), {center: {lat: 35.172899, lng: 136.887531},
zoom: 15});- // circle- var circle_coordinates = [{lat: 35.174044, lng: 136.892795},{lat: 35.168431, lng: 136.886906},{lat: 35.166475, lng: 136.881477},- ];+ $.ajax({+url: 'data.json',+type: 'GET',+dataType: 'json'+ })+ .done(function(data){+console.log(data);+render(data);+ })+ .fail(function(){+console.log('error');+ });+}- circle_coordinates.forEach(function(coordinate){+function render(data){+ data.circle_coordinates.forEach(function(coordinate){
var circle = new google.maps.Circle({map: map,
center: coordinate,radius: 100});});}

data.json{"circle_coordinates": [{"lat": 35.174044,"lng": 136.892795},{

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/googlemapsapi/03.md

4 / 18 ページ

1/2

2018/6/17

webgis-hands-on/03.md at master · hajime-miyauchi/webgis-hands-on"lat": 35.168431,"lng": 136.886906},{"lat": 35.166475,"lng": 136.881477}]}

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/googlemapsapi/03.md

5 / 18 ページ

2/2