Cacher is the code snippet organizer for pro developers

<div id="map"> </div>

script(src="https://maps.googleapis.com/maps/api/js")

для подключения на сайте нужен будет ключ

// Своя метка

google.maps.event.addDomListener(window, 'load', init);

	function init() {
		var mapOptions = {
			zoom: 10,
			center: new google.maps.LatLng(55.7494733, 37.352325),
		};


		var mapElement = document.getElementById('map');
		var map = new google.maps.Map(mapElement, mapOptions);

		var image = {
			url: 'img/marker.png',
			size: new google.maps.Size(25, 33),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(12, 30)
		};


		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(55.7494733, 37.352325),
			map: map,
			icon: image
		});
	}


//Своя метка + стилизация карты + попап
google.maps.event.addDomListener(window, 'load', init);

	function init() {
		var mapOptions = {
			zoom: 10,
			center: new google.maps.LatLng(55.7494733, 37.352325),

			styles: [{
				"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}]}]
		};


		var mapElement = document.getElementById('map');
		var map = new google.maps.Map(mapElement, mapOptions);

		var image = {
			url: 'img/marker.png',
			size: new google.maps.Size(25, 33),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(12, 30)
		};

	

		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(55.7494733, 37.352325),
			map: map,
			icon: image,
			title: 'Москва!'
		});

		marker.addListener('click', function () {
			infowindow.open(map, marker);
		});


		//=============================

		var contentString2 = '<div class="info-window"><img src="logo.jpg"><div class="inner"><p class="title">Шеф-Вкуса2</p><p class="city">г. Москва</p><a href="#" class="link">О проекте</a> </div></div>';


		var infowindow2 = new google.maps.InfoWindow({
			content: contentString2
		});

		var marker2 = new google.maps.Marker({
			position: new google.maps.LatLng(55.5494733, 37.352325),
			map: map,
			icon: image,
			title: 'Москва!'
		});


		marker2.addListener('click', function () {
			infowindow2.open(map, marker2);
		});

		//=============================
	}