使用Google Map v3地圖在的網站上

Google Maps JavaScript API v3允許你客制化googlemap的style，跟無聊和網站風格不達的googlemap地圖擺擺吧。

在SnazzyMaps，找一個你喜歡的風格，當然你也可以自己手刻你要的style，選好後會得到下面的代碼，放在Head之前

// When the window has finished loading create our google map below

google.maps.event.addDomListener(window, 'load', init);

function init() {

// Basic options for a simple Google Map

// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

var mapOptions = {

// How zoomed in you want the map to start at (always required)

zoom: 11,

// The latitude and longitude to center the map (always required)

center: new google.maps.LatLng(40.6700, -73.9400), // New York

// How you would like to style the map.

// This is where you would paste any style found on Snazzy Maps.

styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]

};

// Get the HTML DOM element that will contain your map

// We are using a div with id="map" seen below in the <body>

var mapElement = document.getElementById('map');

// Create the Google Map using out element and options defined above

var map = new google.maps.Map(mapElement, mapOptions);

}

</script>

以上的代碼第一行，key=xxxxx，xxxxx就是你的API key，需要到google developer tool申請一個，教學看官方這個：申請google api說明文件

在你要現實地圖的地方插入DIV，對應以上js：

1	<div id="map"></div>

如果你要加一個Maker，在剛才的js代碼上多加一個Maker：

//其他js代碼

var map = new google.maps.Map(mapElement, mapOptions);

var marker = new google.maps.Marker({

position: new google.maps.LatLng(22.27628, 114.17173),

map: map,

icon: 'your-icon-url' });

}

//其他js代碼

LatLng，就是你google map地址的坐標，可以到「選找地圖坐標」網站找到。
當然你可以使用全部google map api的客制化選項：google map v3 api

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。