Class 10

Class 10
**********

今日作業呈現

今天教的是如何使用Google API，在網頁中放入Googlemap，先到http://nchu-mis-html5.blogspot.tw➜學習素材➜Google API➜Google Maps API


1.
<style></style>➜定義CSS

2. 
Geolocation
➜在頁面上嵌入一個地圖

 2.
 Marker Labels
 ➜在頁面上的地圖多加上氣球

3.
  var map1 = new google.maps.Map(document.getElementById('m'), {
    zoom: 16,
    center: {lat: 24.121308,lng: 120.677175}
  });

  var marker1 = new google.maps.Marker({
    position: {lat: 24.12112,lng: 120.6771},
    map: map1,
    title: '資訊科學大樓'
  });

 var map1     ➜ 想讓一個頁面上有很多map，就var map1 = new______
                                                                            var map2 = new______
                                                                            var map3 = new______
 var marker1 ➜ 想讓一個map上有很多氣球，就var marker1 = new______
                                                                            var marker2 = new______
                                                                            var marker3 = new______

4.
<div id="m"></div>  ➜做出一個看不見的停車格

var map1 = new google.maps.Map(document.getElementById('m')..........
      ↳顯現出車子，但車子要停哪是看document.getElementById('m')，
        這邊用到id="m"所以是要放到剛剛做出來的那個停車格

5.
  markers.push(marker);
        ↑                      ↳產生指標氣球
        ↑                        push進指標陣列
        ↑←←←←←←←←←←←↲



p.s.頁面中要放入地圖要記得先申請Google Maps API  

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>