Answer the question
In order to leave comments, you need to log in
Need help customizing the Google Maps API?
Hello everyone , I
have this HTML markup:
<section id="google-map">
<div id="google-container"></div>
<div id="zoom-in"></div>
<div id="zoom-out"></div>
<address>улица Артема, 80, Киев, город Киев, Украина</address>
</section>
function initialize() {
// Create an array of styles.
var latitude = 53.356525,
longitude = -6.253810,
map_zoom = 18;
//Адрес до иконки с маркером
var marker_url = 'img/marker.png';
var main_color = '#007148', //основной цвет
saturation_value= -1, //насыщенность
brightness_value= 1; //яркость
//Стили для элементов на карте
var style= [
{
"stylers": [
{
"visibility": "on"
},
{
"saturation": -100
},
{
"gamma": 0.54
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"stylers": [
{
"color": "#4d4946"
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"gamma": 0.48
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"gamma": 7.18
}
]
}
];
//Создание точки на карте
var map_options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: map_zoom,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
styles: style
}
//Инициализация карты
var map = new google.maps.Map(document.getElementById('google-container'), map_options);
//Добавляем свой маркер местонахождения на карту (свою иконку)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
visible: true,
icon: marker_url
});
//Добавляем свои иконки для кнопок увеличить/уменьшить на карту
function CustomZoomControl(controlDiv, map) {
var controlUIzoomIn= document.getElementById('zoom-in'),
controlUIzoomOut= document.getElementById('zoom-out');
controlDiv.appendChild(controlUIzoomIn);
controlDiv.appendChild(controlUIzoomOut);
//Делаем привязку для кнопок увеличить/уменьшить при клике
google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
map.setZoom(map.getZoom()+1)
});
google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
map.setZoom(map.getZoom()-1)
});
}
var zoomControlDiv = document.createElement('div');
var zoomControl = new CustomZoomControl(zoomControlDiv, map);
//Помещаем кнопки увеличить/уменьшить на карту в левый верхний угол
map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question