線上書籍

Home

PHP SMARTY 樣板引擎

一、Google Maps JavaScript API V3

  1. 可以不需要金鑰,但https:// 請求會放阻止,解決方案就是申請金鑰
  2. 每個API每天最多25,000次地圖載入
  3. 每天最多可以使用“樣式地圖”功能修改的2500張地圖載入量
  4. 取得金鑰:https://developers.google.com/maps/documentation/javascript/get-api-key#key

二、簡易的google maps

  1. 載入 google maps api
  2. 指定地圖DOM元素(使用div標記)
  3. 透過地圖屬性,建立地圖
  4. 此方法僅適合 http:// ,若是https:// 請用 第6點的方法。
  5. 程式碼 <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>

     

  6. 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>

     

  7.