<html>
<head>
<meta name="description" content="Google Map- hello world">
<title>Google Map- hello world</title>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script>
function initMap() {
var mapProp = {
center:new google.maps.LatLng(23.7,121),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map" style="width:500px;height:800px;"></div>
</body>
</html>
介接國土測繪中心的 wmts 國土測繪圖資服務雲介接服務說明
<html>
<head>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&sensor=false">
</script>
<script>
function initMap() {
const wmsMapType = new google.maps.ImageMapType({
maxZoom: 18,
minZoom: 7,
name: "EMAP",
// 每個磚格設定為 256 X 256
tileSize: new google.maps.Size(256, 256),
isPng: true,
// 使用國土測繪中心的 wmts 來進行範例
getTileUrl: function(coord, zoom) {
return `http://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/${zoom}/${coord.y}/${coord.x}.png`;
}
});
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(23.6, 120.75)
});
map.overlayMapTypes.insertAt(0, wmsMapType);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map" style="width:500px;height:800px;"></div>
</body>
</html>
地圖網址 ：140.115.123.30/earth/shade/TWgeomap3.jpg, 或下載台灣地質圖
左上（118.755, 26.025）右上(122.619, 26.037)
左下（118.722, 21.087）右下(122.568, 21.099)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
// This example uses a GroundOverlay to place an image on the map
// showing an geology map of Taiwan.
var historicalOverlay;
function initialize() {
var tw = new google.maps.LatLng(23.7, 120.5);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(21.087,118.722),
new google.maps.LatLng(26.037,122.619));
var mapOptions = {
zoom: 8,
center: tw
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
historicalOverlay = new google.maps.GroundOverlay(
'http://web.ntnu.edu.tw/~hchou/TWgeomap3.jpg.jpg',
imageBounds);
historicalOverlay.setOpacity(0.5);
historicalOverlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Google Style Map 範例</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
//1.建立 a array of styles （本例中為 myStyles）
var myStyles = [
{
stylers: [
{ hue: '#008C23' },
{ visibility: 'simplified' },
{ gamma: 0.5 },
{ weight: 0.5 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'water',
stylers: [
{ color: '#0000D9' }
]
}
];
// 2. 建立 a new StyledMapType object （本例中為 customMapType）,
// 以 array of styles （本例中為 myStyles）,
// 及 map type control 的名稱 為參數 （本例中為 "my Styled Map"）
var customMapType = new google.maps.StyledMapType(myStyles, {name: "my Styled Map"});
// 3. 建立 map object, 將 MapTypeId （本例中為 'custom_style'）加到 map type control 中
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(25.024348, 121.5247999),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID,'custom_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//4. 將styled map (customMapType)和 MapTypeId ('custom_style') 連結
map.mapTypes.set('custom_style', customMapType);
map.setMapTypeId('custom_style');
} //end of initialize()
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
以USGS GeoJSON Summary Format 資料為範例
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
function initialize() {
// 建立一個地圖
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {lat: 23.5, lng: 121}
});
// 載入GeoJSON 資料，本例使用USGS 地震
map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
以USGS ATOM Syndication 資料為範例
Google Map API Data Layer: Simple - JS Bin
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
function initialize() {
// 建立一個地圖
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {lat: 23.5, lng: 121}
});
// 載入GeoRSS 資料，本例使用USGS 地震
var georssLayer = new google.maps.KmlLayer({
url: 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.atom'
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
(需要API Key)
靜態地圖，無互動
https://maps.googleapis.com/maps/api/staticmap?center=23.7,121&zoom=8&size=400x640&maptype=roadmap&markers=color:red|23.47,120.96&key=API_KEY
玉山的高度
https://maps.googleapis.com/maps/api/elevation/json?locations=23.469477,120.958435&key=API_KEY
返回座標
https://maps.googleapis.com/maps/api/geocode/json?address=台北市和平東路一段162號&key=API_KEY
https://maps.googleapis.com/maps/api/geocode/json?address=國立台灣師範大學&key=API_KEY
靜態街景
https://maps.googleapis.com/maps/api/streetview?size=400x400&location=25.026537,121.527536&fov=70&heading=180&pitch=5&key=API_KEY
https://maps.googleapis.com/maps/api/directions/json?origin=台北101大樓&destination=中正紀念堂&mode=driving&language=zh-TW&key=API_KEY
https://maps.googleapis.com/maps/api/distancematrix/json?origins=台北101大樓&destinations=中正紀念堂&mode=driving&language=zh-TW&key=API_KEY
https://maps.googleapis.com/maps/api/timezone/json?location=25.026537,121.527536×tamp=1433837130&language=zh-TW&key=API_KEY