19-8 Google map

官網：http://hpneo.github.io/gmaps/

範例：

1. 引入JS

   
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript" src="gmaps.js"></script>

2. SCRIPT

   
   <script type="text/javascript">
     var map;
     $(document).ready(function(){
       map = new GMaps({
         div: '#map',
         lat: 23.0097244,//緯度
         lng: 120.2693//經度
       });
   
       map.addMarker({
         lat: 23.0097244,
         lng: 120.2693,
         title: '育將電腦工作室',//標題,23.0097244,120.2670898
         infoWindow: {
           content: "<div style='color:black;'>台南市永康區大灣路158號<br>育將電腦工作室</div>"//視窗
         }
       });
       map.drawOverlay({
         lat: 23.0097244,
         lng: 120.2693,
         content: "<div style='color:black;'>育將電腦工作室</div>"
       });
     });
   </script>
   

3. HTML
   可以用容器來包裝
   一定要有高度及寬度，地圖才會顯示！

4. <div id="map" style="height:300px;width:50%;"></div>