Главная > Web > Черно-белая карта Google

Черно-белая карта Google

HTML:

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Javascript:

var map;
function initMap(){
	map=new google.maps.Map(document.getElementById('map'),{
		center:{lat:50.464579,lng:30.522939},
		zoom:17,
		scrollwheel:false,
	});
	var image='/images/icon_pin.png';
	var marker=new google.maps.Marker({
		position:{lat:50.464579,lng:30.522939},
		map:map,
		icon:image,
		title:'Адрес',
	});
	var infowindow=new google.maps.InfoWindow({
		content:'Название компании<br/>Адрес',
	});
	marker.addListener('click',function(){
		infowindow.open(map,marker);
	});
	var styledMapType=new google.maps.StyledMapType(
		[
			{
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#f5f5f5"
					}
				]
			},
			{
				"elementType":"labels.icon",
				"stylers":[
					{
						"visibility":"off"
					}
				]
			},
			{
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#616161"
					}
				]
			},
			{
				"elementType":"labels.text.stroke",
				"stylers":[
					{
						"color":"#f5f5f5"
					}
				]
			},
			{
				"featureType":"administrative.land_parcel",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#bdbdbd"
					}
				]
			},
			{
				"featureType":"poi",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#eeeeee"
					}
				]
			},
			{
				"featureType":"poi",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#757575"
					}
				]
			},
			{
				"featureType":"poi.park",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#e5e5e5"
					}
				]
			},
			{
				"featureType":"poi.park",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#9e9e9e"
					}
				]
			},
			{
				"featureType":"road",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#ffffff"
					}
				]
			},
			{
				"featureType":"road.arterial",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#757575"
					}
				]
			},
			{
				"featureType":"road.highway",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#dadada"
					}
				]
			},
			{
				"featureType":"road.highway",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#616161"
					}
				]
			},
			{
				"featureType":"road.local",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#9e9e9e"
					}
				]
			},
			{
				"featureType":"transit.line",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#e5e5e5"
					}
				]
			},
			{
				"featureType":"transit.station",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#eeeeee"
					}
				]
			},
			{
				"featureType":"water",
				"elementType":"geometry",
				"stylers":[
					{
						"color":"#c9c9c9"
					}
				]
			},
			{
				"featureType":"water",
				"elementType":"labels.text.fill",
				"stylers":[
					{
						"color":"#9e9e9e"
					}
				]
			}
		],
		{name:'Styled Map'}
	);
	map.mapTypes.set('styled_map',styledMapType);
	map.setMapTypeId('styled_map');
}

CSS:

#map{
	width:570px;
	height:530px;
}

Подробнее: https://developers.google.com/maps/documentation/javascript/
Google Maps APIs Styling Wizard для быстрого создания объекта стиля JSON: https://mapstyle.withgoogle.com/

Categories: Web Tags:
  1. Пока что нет комментариев.
Похожие публикации