PHP SMARTY 樣板引擎
一、Google Maps JavaScript API V3
- 可以不需要金鑰,但https:// 請求會放阻止,解決方案就是申請金鑰
- 每個API每天最多25,000次地圖載入
- 每天最多可以使用“樣式地圖”功能修改的2500張地圖載入量
- 取得金鑰:https://developers.google.com/maps/documentation/javascript/get-api-key#key
二、簡易的google maps
- 載入 google maps api
- 指定地圖DOM元素(使用div標記)
- 透過地圖屬性,建立地圖
- 此方法僅適合 http:// ,若是https:// 請用 第6點的方法。
- 程式碼
<script type="text/javascript">
//載入Google Maps API 3
window.onload = loadScript;
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
function initialize() {
//設定地圖屬性,建立地圖
var myLatlng = new google.maps.LatLng(23.009676,120.2670563);
//Google Map初始化
var myOptions = {
zoom: 18,
center: myLatlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
一定要指定寬度、高度,否則將不會顯示地圖
<div id="map_canvas" style="width: 100%;height:300px;"></div> - https:// 引入方法
<!-- https:// 引入方式 請自行替換 YOUR_API_KEY -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript">
function initialize() {
var uluru = {lat: 23.056511, lng: 120.268975};//緯度,經度
var mapOptions = {
center: uluru,
zoom: 16
};
var map = new google.maps.Map(document.getElementById('mg-map'),mapOptions);
var infowindow = new google.maps.InfoWindow({
content: "<strong>競鴻事業有限公司</strong><br>台南市永康區和平路258巷60號<br />0980-229609<br />陳世男",
maxWidth: 200
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: "競鴻事業有限公司"
//, icon:"https://www.jinghung.com/modules/ugm_jinghung/images/maps.png"
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>