在带有标记的地图上添加菜单项(google 地图 api)
Add menu items on map with markers (google maps api)
我创建了一个带有标记和信息窗口的地图,效果很好。现在我想在地图顶部添加菜单项。我有所有的代码片段,但我无法将它们放在一起并使其正常工作。
如有任何帮助,我们将不胜感激!
谢谢,quiderriere
这是工作站点的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Stadtereignisse</title>
<meta name="description" content="Stadtereignisse - Interventionen im öffentlichen Raum">
<meta name="keywords" content="Stadtereignisse, Kunstvermittlung, Kulturvermittlung, öffentlicher Raum, public space, Kunst im öffentlichen Raum, temporäre Kunst, temporär">
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
/* CSS OF MENU ON MAP */
.button,
.button-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button,
.button-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button {
color: #000000;
background: #ffffff;
border: 0px solid #A9BBDF;
}
.button-selected,
.button:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
/* CSS OF SELECTED MENU ITEM (CHANGE ON EACH PAGE) */
.button1,
.button1-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button1,
.button1-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button1 {
color: #000000;
background: #8acbbb;
border: 0px solid #A9BBDF;
}
.button1-selected,
.button1:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1024px; height: 500px;"></div>
<script>
// Define your locations: HTML content for mouseover, the info window content, latitude, longitude
var locations = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839, 1]
];
var events = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839]
];
var icons = [
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_Weiss1.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png'
]
var iconsLength = icons.length;
// POSITIONING OF MAP ZOOM
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(47.4867355, 8.2109103),
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* DROPDOWN MENU - CHANGE TO TRUE TO SHOW */
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
// STILISIERUNG DER MAP
var styles = [{
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#0F0919"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8acbbb"
}]
}, {
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#002FA7"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry.fill",
"stylers": [{
"color": "#E60003"
}]
}, {
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FBFCF4"
}]
}, {
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FFED00"
}]
}, {
"featureType": "poi.government",
"elementType": "geometry.fill",
"stylers": [{
"color": "#D41C1D"
}]
}, {
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [{
"color": "#BF0000"
}]
}, {
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -100
}]
}];
map.setOptions({
styles: styles
});
// INFOWINDOWS
var infowindow = new google.maps.InfoWindow({
maxWidth: 700,
});
var markers = new Array();
var iconCounter = 0;
// ADD MARKERS AND INFOWINODWS TO MAP
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
/* title: locations[i][0], */
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (ALLOW EACH MARKER TO HAVE AN INFOWINDOW)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if (iconCounter >= iconsLength) {
iconCounter = 0;
}
}
</script>
</body>
</html>
这就是我想补充的:
// ADD MENU ITEMS
adderinnertControl(map);
adderdachtControl(map);
adddokumentiertControl(map);
adderlebtControl(map);
}
function adderinnertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erinnert';
control.className = 'button1';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("http://www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderdachtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erdacht';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adddokumentiertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse dokumentiert';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderlebtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse erlebt';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
有什么提示吗?
谢谢
您需要将该代码添加到您的页面在 地图初始化之后。
代码片段:
// Define your locations: HTML content for mouseover, the info window content, latitude, longitude
var locations = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839, 1]
];
var events = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839]
];
var icons = [
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_Weiss1.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png'
]
var iconsLength = icons.length;
// POSITIONING OF MAP ZOOM
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(47.4867355, 8.2109103),
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* DROPDOWN MENU - CHANGE TO TRUE TO SHOW */
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
// STILISIERUNG DER MAP
var styles = [{
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#0F0919"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8acbbb"
}]
}, {
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#002FA7"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry.fill",
"stylers": [{
"color": "#E60003"
}]
}, {
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FBFCF4"
}]
}, {
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FFED00"
}]
}, {
"featureType": "poi.government",
"elementType": "geometry.fill",
"stylers": [{
"color": "#D41C1D"
}]
}, {
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [{
"color": "#BF0000"
}]
}, {
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -100
}]
}];
map.setOptions({
styles: styles
});
// INFOWINDOWS
var infowindow = new google.maps.InfoWindow({
maxWidth: 700,
});
var markers = new Array();
var iconCounter = 0;
// ADD MARKERS AND INFOWINODWS TO MAP
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
/* title: locations[i][0], */
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (ALLOW EACH MARKER TO HAVE AN INFOWINDOW)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if (iconCounter >= iconsLength) {
iconCounter = 0;
}
}
// ADD MENU ITEMS
adderinnertControl(map);
adderdachtControl(map);
adddokumentiertControl(map);
adderlebtControl(map);
function adderinnertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erinnert';
control.className = 'button1';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("http://www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderdachtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erdacht';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adddokumentiertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse dokumentiert';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderlebtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse erlebt';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
/* CSS OF MENU ON MAP */
.button,
.button-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button,
.button-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button {
color: #000000;
background: #ffffff;
border: 0px solid #A9BBDF;
}
.button-selected,
.button:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
/* CSS OF SELECTED MENU ITEM (CHANGE ON EACH PAGE) */
.button1,
.button1-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button1,
.button1-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button1 {
color: #000000;
background: #8acbbb;
border: 0px solid #A9BBDF;
}
.button1-selected,
.button1:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
我创建了一个带有标记和信息窗口的地图,效果很好。现在我想在地图顶部添加菜单项。我有所有的代码片段,但我无法将它们放在一起并使其正常工作。
如有任何帮助,我们将不胜感激! 谢谢,quiderriere
这是工作站点的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Stadtereignisse</title>
<meta name="description" content="Stadtereignisse - Interventionen im öffentlichen Raum">
<meta name="keywords" content="Stadtereignisse, Kunstvermittlung, Kulturvermittlung, öffentlicher Raum, public space, Kunst im öffentlichen Raum, temporäre Kunst, temporär">
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
/* CSS OF MENU ON MAP */
.button,
.button-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button,
.button-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button {
color: #000000;
background: #ffffff;
border: 0px solid #A9BBDF;
}
.button-selected,
.button:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
/* CSS OF SELECTED MENU ITEM (CHANGE ON EACH PAGE) */
.button1,
.button1-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button1,
.button1-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button1 {
color: #000000;
background: #8acbbb;
border: 0px solid #A9BBDF;
}
.button1-selected,
.button1:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1024px; height: 500px;"></div>
<script>
// Define your locations: HTML content for mouseover, the info window content, latitude, longitude
var locations = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839, 1]
];
var events = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839]
];
var icons = [
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_Weiss1.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png'
]
var iconsLength = icons.length;
// POSITIONING OF MAP ZOOM
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(47.4867355, 8.2109103),
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* DROPDOWN MENU - CHANGE TO TRUE TO SHOW */
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
// STILISIERUNG DER MAP
var styles = [{
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#0F0919"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8acbbb"
}]
}, {
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#002FA7"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry.fill",
"stylers": [{
"color": "#E60003"
}]
}, {
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FBFCF4"
}]
}, {
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FFED00"
}]
}, {
"featureType": "poi.government",
"elementType": "geometry.fill",
"stylers": [{
"color": "#D41C1D"
}]
}, {
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [{
"color": "#BF0000"
}]
}, {
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -100
}]
}];
map.setOptions({
styles: styles
});
// INFOWINDOWS
var infowindow = new google.maps.InfoWindow({
maxWidth: 700,
});
var markers = new Array();
var iconCounter = 0;
// ADD MARKERS AND INFOWINODWS TO MAP
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
/* title: locations[i][0], */
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (ALLOW EACH MARKER TO HAVE AN INFOWINDOW)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if (iconCounter >= iconsLength) {
iconCounter = 0;
}
}
</script>
</body>
</html>
这就是我想补充的:
// ADD MENU ITEMS
adderinnertControl(map);
adderdachtControl(map);
adddokumentiertControl(map);
adderlebtControl(map);
}
function adderinnertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erinnert';
control.className = 'button1';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("http://www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderdachtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erdacht';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adddokumentiertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse dokumentiert';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderlebtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse erlebt';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
有什么提示吗? 谢谢
您需要将该代码添加到您的页面在 地图初始化之后。
代码片段:
// Define your locations: HTML content for mouseover, the info window content, latitude, longitude
var locations = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839, 1]
];
var events = [
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.4867355, 8.2109103],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48284379, 8.20684075],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.<h7>', 47.48278578, 8.20822477],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48532346, 8.20841789],
['<h8>Stadtereignisse Brugg</h8>', '<h7>Am Samstag, 4. Juni 2016 finden in der Brugger Innenstadt die <a href="http://www.stadtereignisse.ch/bruggtext/" >«Stadtereignisse Brugg»</a> statt. 140 Schülerinnen und Schüler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit künstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «Öffentlicher Raum» und «Temporäre Kunstformen» auseinander.</h7>', 47.48478693, 8.2096839]
];
var icons = [
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_Weiss1.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png',
'http://www.stadtereignisse.ch/pictures/Pfeil_Elemente_rot17.png'
]
var iconsLength = icons.length;
// POSITIONING OF MAP ZOOM
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(47.4867355, 8.2109103),
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* DROPDOWN MENU - CHANGE TO TRUE TO SHOW */
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
// STILISIERUNG DER MAP
var styles = [{
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#0F0919"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8acbbb"
}]
}, {
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#002FA7"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry.fill",
"stylers": [{
"color": "#E60003"
}]
}, {
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FBFCF4"
}]
}, {
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [{
"color": "#FFED00"
}]
}, {
"featureType": "poi.government",
"elementType": "geometry.fill",
"stylers": [{
"color": "#D41C1D"
}]
}, {
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [{
"color": "#BF0000"
}]
}, {
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -100
}]
}];
map.setOptions({
styles: styles
});
// INFOWINDOWS
var infowindow = new google.maps.InfoWindow({
maxWidth: 700,
});
var markers = new Array();
var iconCounter = 0;
// ADD MARKERS AND INFOWINODWS TO MAP
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
/* title: locations[i][0], */
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (ALLOW EACH MARKER TO HAVE AN INFOWINDOW)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if (iconCounter >= iconsLength) {
iconCounter = 0;
}
}
// ADD MENU ITEMS
adderinnertControl(map);
adderdachtControl(map);
adddokumentiertControl(map);
adderlebtControl(map);
function adderinnertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erinnert';
control.className = 'button1';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("http://www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderdachtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Hier erdacht';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adddokumentiertControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse dokumentiert';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
function adderlebtControl(map) {
var control = document.createElement('DIV');
control.innerHTML = 'Stadtereignisse erlebt';
control.className = 'button';
control.index = 1;
// Add the control to the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
// When the button is clicked open Stadtereignisse main page
google.maps.event.addDomListener(control, 'click', function() {
window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
/* CSS OF MENU ON MAP */
.button,
.button-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button,
.button-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button {
color: #000000;
background: #ffffff;
border: 0px solid #A9BBDF;
}
.button-selected,
.button:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
/* CSS OF SELECTED MENU ITEM (CHANGE ON EACH PAGE) */
.button1,
.button1-selected,
.dropdown {
cursor: pointer;
font-family: Courier 10 Pitch, Courier, monospace;
font-size: 13px;
background color: #8acbbb;
line-height: 160%;
-moz-border-radius: 2px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
-webkit-user-select: none;
-moz-user-select: none;
}
.button1,
.button1-selected {
padding: 0 6px;
border-radius: 2px;
margin: 5px;
text-align: center;
overflow: hidden;
}
.button1 {
color: #000000;
background: #8acbbb;
border: 0px solid #A9BBDF;
}
.button1-selected,
.button1:hover {
border: 0px solid #678AC7;
background: #8acbbb;
color: #000000;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>