Маркеры на стилизованной карте
Я пытаюсь применить массив стилей к карте с маркерами. Это основано на двух функциональных примерах, которые я пытаюсь объединить любым возможным способом. Само собой разумеется, я еще не преуспел.
Вот моя идея:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { height: 80% ; width:100%; //*position:(100,0);*//}
#content {}
</style>
<script type="text/javascript"
src="http://maps-api-tt.appspot.com/apilite/styled/apiv3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.795624, 15.724284);
var settings = {
zoom: 18,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
navigationControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
var styles = {
"map_canvas": [
{
featureType: 'all',
rules: [
{ "invert_lightness": true },
{ "weight": 0.5 },
{ "lightness": 5 },
{ "gamma": 1.58 },
{ "saturation": 2 }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">heading</h1>'+
'<div id="bodyContent">'+
'<p>sample txt</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var companyImage = new google.maps.MarkerImage('images/logoo.png',
new google.maps.Size(337,191),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logoo_shadow.png',
new google.maps.Size(337,191),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(51.796414, 15.724155);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"Kacza Górka Park Sportowy",
zIndex: 3});
var skateImage = new google.maps.MarkerImage('images/skate.png',
new google.maps.Size(100,100),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var skateShadow = new google.maps.MarkerImage('images/skate_shadow.png',
new google.maps.Size(100,100),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var skatePos = new google.maps.LatLng(51.795623, 15.724286);
var skateMarker = new google.maps.Marker({
position: skatePos,
map: map,
icon: skateImage,
shadow: skateShadow,
title:"skate park",
zIndex: 2
});
var parkingImage = new google.maps.MarkerImage('images/parking.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var parkingShadow = new google.maps.MarkerImage('images/parking_shadow.png',
new google.maps.Size(70,50),
new google.maps.Point(0,0),
new google.maps.Point(60, 50)
);
var parkingPos = new google.maps.LatLng(57.0437, 9.9147);
var parkingMarker = new google.maps.Marker({
position: parkingPos,
map: map,
icon: parkingImage,
shadow: parkingShadow,
title:"Parking Lot",
zIndex: 1
});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
Я пытался некоторое время сейчас, но не мог понять это, я буду признателен за любой вклад.
1 ответ
Решение
Ниже вы можете найти чистый пример стилизованной карты. При нажатии на ссылку "Добавить некоторые маркеры" на карту добавляются новые маркеры.
Для создания новых стилей для вашей карты вы можете использовать мастер стилей Google Style Maps, который автоматически создает объект JSON для передачи в свойство style вашего объекта MapOptions, чтобы применить стиль к карте API Карт v3.
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177, -89.406738, 2]
],
demoCenter = new google.maps.LatLng(41, -87),
map,
styles = [{
stylers: [{
hue: "#00ffe6"
}, {
saturation: -20
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
lightness: 100
}, {
visibility: "simplified"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
function initialize() {
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
}),
mapOptions = {
zoom: 7,
center: demoCenter,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
function addMarkers() {
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(cityList[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
$(document).ready(function () {
initialize();
});
$(document).on('click', '.add-markers', function (e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
<a href="#" class="add-markers">Add Some Markers</a>
</div>
</body>
</html>
Надеюсь, это поможет.