自定義Google地圖標誌及參數

hsw

最近因為剛好需要可以自定義Google地圖標誌及參數的Javascript語法,
所以網搜了一下,找到這個利用Google地圖API的實用程式,
在此分享給大家,若公司或個人需要自定義Google地圖標誌,這程式絕對可以派上用場...

不囉嗦,先看程式碼:

1. <div id="vat_canvas" style="width:100%;height:100%;"></div>
   
2. <script type="text/javascript">
   
3. <!--//
   
4. var script = document.createElement('script') ;
   
5. script.type = 'text/javascript' ;
   
6. script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&'
   
7.   + 'callback=initialize&'
   
8.   + 'language=zh-TW' ;
   
9. document.body.appendChild(script) ;
   
10. var map = null ;
    
11. var geoCoder = null ;
    
12. var hide_address = '0' ;
    
13. function initialize() {
    
14.   var latlng = new google.maps.LatLng(25.033663, 121.564644) ;
    
15.   var mapOptions = {
    
16.    zoom : 16 ,
    
17.    panControl : false ,
    
18.    zoomControl : true ,
    
19.    mapTypeControl : true ,
    
20.    scaleControl : true ,
    
21.    streetViewControl : true ,
    
22.    overviewMapControl : true ,
    
23.    rotateControl : true ,
    
24.    center : latlng
    
25.   };
    
26.   map = new google.maps.Map(document.getElementById('vat_canvas'), mapOptions) ;
    
27.   var html = '<div style="width:212px;height:55px;">'
    
28.    + '<font color="red">性感小野貓股份有限公司</font><BR>'
    
29.    + '<font color="green">統編：12345678</font><BR>'
    
30.    + '<font color="blue">地址：台北101性感路野貓巷520號</font></div>' ;
    
31.   var infowindow = new google.maps.InfoWindow({
    
32.    content : html
    
33.   });
    
34.   var marker = new google.maps.Marker({
    
35.    map : map ,
    
36.    position : latlng ,
    
37.    title : '性感小野貓股份有限公司'
    
38.   });
    
39.   infowindow.open(map,marker) ;
    
40. }
    
41. //-->
    
42. </script>

複製代碼

再看效果:

大致上需要修改的地方不多:
1. var latlng = new google.maps.LatLng(25.033663, 121.564644) ;
須調整裡面的經緯度,可利用Google地圖直接查你要標誌位置的經緯度然後填入.
2. zoom : 16 ,
這數值為地圖的縮放程度,依照需求自己做調整吧.
3. var html = '<div style="width:212px;height:55px;">'
   + '<font color="red">性感小野貓股份有限公司</font><BR>'
   + '<font color="green">統編：12345678</font><BR>'
   + '<font color="blue">地址：台北101性感路野貓巷520號</font></div>' ;
調整自定義標誌的框架寬及高,內容文字跟文字顏色等,視需求自行調整.
4. title : '性感小野貓股份有限公司'
這是滑鼠移到標誌時會顯示的名稱,視需求自行調整吧.

這樣就大功告成啦!

下載程式碼: def_map.htm (1.32 KB, 下載次數: 1109)

2014-6-6 11:14 上傳

點擊文件名下載附件

小野貓

太感動了！樓主你好棒。
討厭啦!!人家要低調點的...等下造成萬人空巷....連電視都要播了....

hsw

小野貓 發表於 2014-6-6 13:45
太感動了！樓主你好棒。
討厭啦!!人家要低調點的...等下造成萬人空巷....連電 ...

高調點...才能顯示出泥滴性感...

小野貓

hsw 發表於 2014-6-6 01:02
高調點...才能顯示出泥滴性感...

我的特質是與生俱來的,不是靠高調才顯示的

hsw

小野貓 發表於 2014-6-6 21:22
我的特質是與生俱來的,不是靠高調才顯示的

人太矮...
所以站高一點...
人家才看得到啦...

小野貓

hsw 發表於 2014-6-6 10:46
人太矮...
所以站高一點...
人家才看得到啦...

你是第一個說我矮的!難道你有2米高!!!

hsw

小野貓 發表於 2014-6-7 06:44
你是第一個說我矮的!難道你有2米高!!!

哪知泥多高...

小野貓

hsw 發表於 2014-6-6 21:32
哪知泥多高...

不知道就能說我矮嗎

hsw

小野貓 發表於 2014-6-7 11:20
不知道就能說我矮嗎

好ㄅ...人矮志氣高...

小野貓

hsw 發表於 2014-6-6 22:23
好ㄅ...人矮志氣高...

說自己嗎?