谷歌地圖是一個偉大的工具，包括在“聯系人”或“關于”頁面。它增加了一層交互，讓您的訪客很快看到你或你的企業是位于那里。然而，如果你真的想讓你的設計脫穎而出，簡單地嵌入一個標準的谷歌地圖是不夠的。
所以在這個簡短的教程中，我將向你展示如何輕松地使谷歌地圖看起來更融入你的品牌和網站。我們使用這種技術，在我們的海登的WordPress主題，你可以很容易地看到，有一個這樣的方法和標準差的世界地圖。
谷歌地圖API
我們要創建一個PHP文件，你可以在你的WordPress頁面模板在你想要的地圖出現。文件名google-map.php之類的東西并把它添加到你的主題的根。這是你需要添加到文件的完整代碼。我將討論重要的線下面的代碼。

<div id=”googleMap”></div>

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>

<script type=”text/javascript”>

//<![CDATA[

var geocoder = new google.maps.Geocoder();

var address = “”; //Add your address here, all on one line.

var latitude;

var longitude;

var color = “”; //Set your tint color. Needs to be a hex value.

function getGeocode() {

geocoder.geocode( { ‘address’: address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

latitude = results[0].geometry.location.lat();

longitude = results[0].geometry.location.lng();

initGoogleMap();

}

});

}

function initGoogleMap() {

var styles = [

{

stylers: [

{ saturation: -100 }

]

}

];

var options = {

mapTypeControlOptions: {

mapTypeIds: [‘Styled’]

},

center: new google.maps.LatLng(latitude, longitude),

zoom: 13,

scrollwheel: false,

navigationControl: false,

mapTypeControl: false,

zoomControl: true,

disableDefaultUI: true,

mapTypeId: ‘Styled’

};

var div = document.getElementById(‘googleMap’);

var map = new google.maps.Map(div, options);

marker = new google.maps.Marker({

map:map,

draggable:false,

animation: google.maps.Animation.DROP,

position: new google.maps.LatLng(latitude,longitude)

});

var styledMapType = new google.maps.StyledMapType(styles, { name: ‘Styled’ });

map.mapTypes.set(‘Styled’, styledMapType);

var infowindow = new google.maps.InfoWindow({

content: “<div class=’iwContent’>”+address+”</div>”

});

google.maps.event.addListener(marker, ‘click’, function() {

infowindow.open(map,marker);

});

bounds = new google.maps.LatLngBounds(

new google.maps.LatLng(-84.999999, -179.999999),

new google.maps.LatLng(84.999999, 179.999999));

rect = new google.maps.Rectangle({

bounds: bounds,

fillColor: color,

fillOpacity: 0.2,

strokeWeight: 0,

map: map

});

}

google.maps.event.addDomListener(window, ‘load’, getGeocode);

//]]>

第一行是在我們添加的div，谷歌地圖將被加載。在3行，我們裝載谷歌地圖API。沒有它，在文件中沒有別的工作。在7行，添加你想出現在地圖上的位置的地址。12號線的getgeocode功能將地址緯度和經度值。這個地址是在一行是很重要的。10行是你設置你的地圖的色調。你需要使用一個十六進制值。例如：#?64cdce。

其他的一些值，你可能想調整是在36線和70線fillopacity變焦。

添加映射到你的網頁模板

根據你想要在你的地圖上出現，你需要將下面的代碼添加到適當的網頁模板。大多數時候，你看到這些地圖的權利，在頁腳右頭。這行代碼簡單荷載我們上面創建的文件。

<？PHP?get_template_part（“谷歌地圖”）；？>

制作地圖的全寬度

添加CSS你的主題的style.css文件。它會為你的地圖設置高度和使其伸展它的含部全寬度