Google Map - отличная возможность добавления на страницу "Контакты" или "О нас". Это добавляет интерактивности и позволяет посетителю быстро увидеть где вы или ваш бизнес находится. Тем неменее, если вы хотите выделяться, простой вставки Google Map будет недостаточно. Таким образом, в этом уроке я покажу как легко и просто добавить карту на сайт и сделать её более интегрированной к с вашим брендингом и веб-сайтом.
Мы собираемся создать 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);
//]]>
</script>
Первая строка, где мы добавляем DIV, в котором Google Map будет загружен. В строке 3 мы загружаем API Google Map. Без него ничего не будет работать. В строке 7 добавьте адрес места, которое будет отображаться на карте. Функция getGeoCode в строке 12 будет преобразовывать адрес для широты и долготы. Важно, что адрес в одной строке. Линия 10, где вы установить цветовой оттенок вашей карты. Вы должны использовать шестнадцатеричное значение. Например: #fff999. Несколько других возможностей, которые вы, возможно, захотите настроить являются увеличение масштаба на строке 36, и fillOpacity (Прозрачность заливки) на строке 70.
В зависимости от места, где вы хотите видеть карту, вам нужно добавить следующий код в нужное место в шаблоне. В основном такие карты добавялются вниз сайта.
<?php get_template_part( 'google-map'); ?>
Последнее оформление карты, настройки размеров.Добавить этот фрагмент CSS кода в ваш Style.css, он сделает карту во всю ширину div'а в котором она находится.
<?#googleMap iframe { width: 100%; } #googleMap { height: 350px; } #googleMap img { max-width: none; } ?>