谷歌地图是一个伟大的工具，包括在“联系人”或“关于”页面。它增加了一层交互，让您的访客很快看到你或你的企业是位于那里。然而，如果你真的想让你的设计脱颖而出，简单地嵌入一个标准的谷歌地图是不够的。
所以在这个简短的教程中，我将向你展示如何轻松地使谷歌地图看起来更融入你的品牌和网站。我们使用这种技术，在我们的海登的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文件。它会为你的地图设置高度和使其伸展它的含部全宽度