<div id="map" style="height: 100%"></div>
<script>
function createMap(){
var opts = {
// center: {
// lat: 59.877516,
// lng: 30.436854,
// },
center: {lat: 59.879263,lng: 30.418588},
zoom: 14,
styles: [
{"featureType": "all",
"stylers":[
{"saturation": 0},
{"hue": "#e7ecf0"}
]
},
{"featureType": "road",
"stylers":[
{"saturation": -70}
]
},
{"featureType": "transit",
"stylers":[
{"visibility": "off"}
]
},
{"featureType": "poi",
"stylers":[
{"visibility": "off"}
]
},
{"featureType": "water",
"stylers":[
{"visibility": "simplified"},
{"saturation": -60}
]
}
],
maxZoom: 20,
minZoom: 0,
mapTypeId: 'roadmap',
};
opts.clickableIcons = true;
opts.disableDoubleClickZoom = false;
opts.draggable = true;
opts.keyboardShortcuts = true;
opts.scrollwheel = false;
var setControlOptions = function(key, enabled, position, style, mapTypeIds){
opts[key + 'Control'] = enabled;
opts[key + 'ControlOptions'] = {
position: google.maps.ControlPosition[position],
style: google.maps.MapTypeControlStyle[style],
mapTypeIds: mapTypeIds
};
};
var markers = [];
setControlOptions('fullscreen',false,'DEFAULT','',null);
setControlOptions('mapType',true,'TOP_LEFT','HORIZONTAL_BAR',["roadmap","satellite","terrain"]);
setControlOptions('rotate',false,'DEFAULT','',null);
setControlOptions('scale',false,'','',null);
setControlOptions('streetView',false,'DEFAULT','',null);
setControlOptions('zoom',true,'LEFT_CENTER','',null);
var map = new google.maps.Map(document.getElementById('map'), opts);
(function(){
var markerOptions = {
map: map,
position: {lat: 59.879263,lng: 30.418588}
};
markerOptions.icon = {
url: 'https://nachalo-apart.ru/map_icons/Nachalo.png',
scaledSize: new google.maps.Size(70,70),
size: new google.maps.Size(70,70),
anchor: new google.maps.Point(35,70)
};
markerOptions.options = {optimized: true};
var marker = new google.maps.Marker(markerOptions);
})();
(function(){
var markerOptions = {
map: map,
position: {lat: 59.877343,lng: 30.441765}
};
markerOptions.icon = {
url: 'https://nachalo-apart.ru/map_icons/metro_peter.png',
scaledSize: new google.maps.Size(50,50),
size: new google.maps.Size(50,50),
anchor: new google.maps.Point(25,50)
};
markerOptions.options = {
optimized: true,
};
var marker = new google.maps.Marker(markerOptions);
})();
// Инициализация маркеров на карте
var markers_array = [];
jQuery.ajax({
url: 'marker_json.json',
dataType: 'json',
success: function(response){
markers_array=response;
jQuery.each(markers_array, function(i, group){
jQuery.each(group.points, function(i2,point){
var image = {
url: group.icon,
scaledSize: new google.maps.Size(33, 38),
size: new google.maps.Size(33, 38),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 16),
};
var marker = new google.maps.Marker({
position: {lat: point.position[0], lng: point.position[1]},
title: point.title,
map: map,
type: group.id,
id: point.id,
animation: google.maps.Animation.DROP,
icon: image
});
markers.push(marker);
})
})
}
});
// Инициализация маркеров на карте конец
google.maps.event.addDomListener(document, 'redraw_map_event', function(e) {
Redrawmymap(map);
});
function Redrawmymap(map) {
filtered = [];
$('.map-menu a.map-btn-llink').each(function(){
var $filter = $(this),
active = $filter.hasClass('activ');
if(active) filtered.push($filter.data('target'));
});
for(var i = 0, length = markers.length; i < length; i ++) {
var visible = ($.inArray(markers[i].type, filtered) > -1);
markers[i].setVisible(visible);
}
}
}
$(document).ready(function() {
$('.map-menu a').click(function(event) {
if($(this).hasClass('activ')) {
$(this).addClass('inactive').removeClass('activ');
} else {
$(this).addClass('activ').removeClass('inactive');
}
var event = new Event("redraw_map_event");
document.dispatchEvent(event);
});
});
</script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5R_xci4pjTEsqFk9Cq5FGaThmvLD0rTo&v=3.31&language=ru&libraries=places,geometry&callback=createMap"></script>