Robby - 全端的 Front-End Engineer

本篇系列紀錄為 w3cgoogleapi 上的學習心得記錄，

google map 很好用，真的要學起來～

 

Using API

<script src="http://maps.googleapis.com/maps/api/js"></script>

 

Initialize 

function initialize(){
}

 

Set Map

var mapProp = {
  center:new google.maps.LatLng(24.1504536, 120.6810641),
  zoom: 17,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

mapTypeId：

•    ROADMAP (normal, default 2D map)
•    SATELLITE (photographic map)
•    HYBRID (photographic map + roads and city names)
•    TERRAIN (map with mountains, rivers, etc.)

Create Map

在 initialize() 內，建立地圖物件，將剛剛參數指定進去。

var map = new google.maps.Map(document.getElemtentById("googleMap"), mapProp );

 
Map Container

<div id="googleMap" style="width:500px;height:380px;"></div>

 

Add an Event

加在js檔案中，建立事件頃聽

google.map.event.addDomListener(window, 'load', initianlize);

 

以上即完成地圖基本載入

 

 

Asynchronously Loading

此方法為將 initialize() 參數轉為 parameter 帶入 url。
於 callback 後串接 function：

function loadScript(){
  var script = document.createElement("script");
  script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

 

Map Demo
CodePen
 

有勘誤之處，不吝指教。ob'_'ov