如果沒有使用 api key，可以在本機端用檔案總管把 html 檔案點開來看。但放到 web server 就會無法顯示。不知道 google 怎麼判斷的。
申請 google 開發人員帳號，建立專案，就可以取得 api key 。這裡不細講。
google map api 官網說明
https://developers.google.com/maps/documentation/javascript
gmap3 是一個外掛套件，提供額外功能。
gmap3 官網
http://gmap3.net
另一個網站
http://v6.gmap3.net/en/catalog/
GMAP3 – A jQuery Google Maps Plugin For The Developers
http://www.bloggermint.com/2011/06/gmap3-a-jquery-google-maps-plugin-for-the-developers/
Google Maps API v3 實用技巧 (一) 地圖設定
http://www.misterngan.com/1351/google-map-api-001/
範例：單純的 google map api
<!doctype html>
<html lang="zh-Hant-TW">
<head>
<meta charset="utf-8">
<!-- 放到網站伺服器要加上 api key -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
<script>
function initMap() {
var myLatLng = {lat: 25.021110, lng: 121.528110};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: '可思科技'
});
}
</script>
</head>
<body>
<div id="map" style="height:300px; width:100%"></div>
</body>
</html>
使用 gmap3 套件
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<style>
.gmap {
position: relative;
width: 100%;
height: 450px;
}
</style>
</head>
<body>
<!-- Google Map -->
<div id="google-map" class="gmap" data-address="106台北市大安區羅斯福路3段191號"></div>
<!-- jQuery Scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="js/gmap3.js"></script>
<!-- Google Map -->
<script type="text/javascript">
$(document).ready( function(){
var gmapDiv = $("#google-map");
var gmapMarker = gmapDiv.attr("data-address");
gmapDiv.gmap3({
zoom: 16,
address: gmapMarker,
oomControl: true,
navigationControl: true,
scrollwheel: true,
styles: [
{
"featureType":"all",
"elementType":"all",
"stylers":[{ "saturation":"0" }]
}
]
})
.marker({
address: gmapMarker,
})
.infowindow({
content: gmapMarker
})
.then(function (infowindow) {
var map = this.get(0);
var marker = this.get(1);
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
});
</script>
</body>
</html>
沒有留言:
張貼留言