В соответствии с Документами Google Maps можно изменить внешний вид ваших карт, если вы определите свои собственные стили для элементов карты. Однако это делается не напрямую с помощью CSS, а с помощью специального определения свойств JS (массива данных), которое можно определить в styles Свойство при инициализации карты:
// Some custom data that will change the look of your map
var CustomMapStyles = [...];
google.maps.event.addDomListener(window, "load", function () {
// Initialize your map
var map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: CustomMapStyles
});
});Каждый элемент в этом массиве должен быть литеральным объектом с некоторыми свойствами, которые определяют, какому элементу должны иметь стили внутри него указанный стиль. Например, если нам нужна карта в черном стиле, мы можем следовать и анализировать следующие правила в CustomMapStyles переменная:
/**
* Define an array of custom styles.
*/
var CustomMapStyles = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
];
google.maps.event.addDomListener(window, "load", function () {
// Initialize your map
var map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: CustomMapStyles
});
});
Вы можете найти живой пример в JSFiddle здесь, чтобы увидеть нашу пользовательскую карту с определенными стилями:
Определение стилей не простая задача, поэтому вам нужно прочитайте документацию Google Maps здесь научиться стилизовать карту в соответствии с вашими потребностями.
Где найти пользовательские готовые темы
Если вы думаете точно так же, как я, было бы довольно скучно, когда вы пытаетесь создать свою собственную тему, так что вы можете найти готовые темы, которые вы можете легко использовать в своем проекте или изменить их по своему усмотрению (что проще, чем начать с нуля) ). Мы говорим о веб-сайт Snazzy Maps:
На этом веб-сайте вы найдете коллекцию строк JSON, которые вы можете определить как переменную в своем скрипте для определения пользовательской темы. Вы также найдете скриншот, чтобы увидеть, как выглядит карта.
