1. Home
  2. /
  3. Web technology
  4. /
  5. Google
  6. /
  7. [ Google ] –...

[ Google ] – Embed Google Maps 以經緯度定位並顯示標記圖示及說明文字

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]
[html]
<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
	var map_canvas = document.getElementById('map_canvas');
	var map_options = {
		center: new google.maps.LatLng(25.041639, 121.445929),
		zoom:16,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(map_canvas, map_options)
	var marke = new google.maps.Marker({
            position: new google.maps.LatLng(25.041639, 121.445929),
            title:'新莊體育館',
            map:map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
[/html]

錯誤訊息解法參考:
Google Maps API error: RefererNotAllowedMapError
參考的來源網址錯誤
在申請apikey的設定中 會設定 *.webteach.tw/*
若你使用 webteach.tw/map.html 這樣就會出現以上的錯誤
一定要使用 www.webteach.tw/map.html
或是子網域 demo.webteach.tw/map.html
Google Maps API error: You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
重覆載入google map api js
請只加載

[javascript]<script src="https://maps.googleapis.com/maps/api/js?key=這裡請填你申請的apikey" type="text/javascript"></script>[/javascript]

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 0,平均評等: 0]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *