-1
Ich habe eine Karte mit Markierungen & infowindows erstellt, die gut funktioniert. Jetzt möchte ich Menüpunkte oben auf der Karte hinzufügen. Ich habe die Code-Schnipsel für alles, aber ich kann es nicht zusammensetzen und es funktioniert.Menüpunkte auf Karte mit Markern hinzufügen (google maps api)
Jede Hilfe wäre sehr willkommen! Danke, quiderriere
Dies ist der Code von der Arbeitsstelle ist:
<!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>Und das ist, was ich hinzufügen möchte:
\t // ADD MENU ITEMS
\t adderinnertControl(map);
\t adderdachtControl(map);
\t adddokumentiertControl(map);
\t adderlebtControl(map);
\t }
\t function adderinnertControl(map) {
\t var control = document.createElement('DIV');
\t control.innerHTML = 'Hier erinnert';
\t control.className = 'button1';
\t control.index = 1;
\t // Add the control to the map
\t map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
\t // When the button is clicked open Stadtereignisse main page
\t google.maps.event.addDomListener(control, 'click', function() {
\t window.open("http://www.stadtereignisse.ch/kartemenutest/", "_self");
\t });
\t }
\t function adderdachtControl(map) {
\t var control = document.createElement('DIV');
\t control.innerHTML = 'Hier erdacht';
\t control.className = 'button';
\t control.index = 1;
\t // Add the control to the map
\t map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
\t // When the button is clicked open Stadtereignisse main page
\t google.maps.event.addDomListener(control, 'click', function() {
\t window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
\t });
\t }
\t function adddokumentiertControl(map) {
\t var control = document.createElement('DIV');
\t control.innerHTML = 'Stadtereignisse dokumentiert';
\t control.className = 'button';
\t control.index = 1;
\t // Add the control to the map
\t map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
\t // When the button is clicked open Stadtereignisse main page
\t google.maps.event.addDomListener(control, 'click', function() {
\t window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
\t });
\t }
\t function adderlebtControl(map) {
\t var control = document.createElement('DIV');
\t control.innerHTML = 'Stadtereignisse erlebt';
\t control.className = 'button';
\t control.index = 1;
\t // Add the control to the map
\t map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
\t // When the button is clicked open Stadtereignisse main page
\t google.maps.event.addDomListener(control, 'click', function() {
\t window.open("www.stadtereignisse.ch/kartemenutest/", "_self");
\t });
\t }
\t google.maps.event.addDomListener(window, 'load', initialize);Irgendwelche Hinweise? Danke.
Ich sehe keinen Versuch, in den entsandten Code, um die Menüs Sie fragen nach hinzuzufügen. Bitte geben Sie ein [minimales, vollständiges, getestetes und lesbares Beispiel] (http://stackoverflow.com/help/mcve) an, das Ihr Problem veranschaulicht. – geocodezip
ok danke! Mein Problem ist, dass ich nicht weiß, wo ich das zweite Code-Snippet hinzufügen soll - und wenn ich es ändern muss. Ich habe versucht, es direkt nach "
" zum Beispiel, sowie im Kopfabschnitt des Codes hinzuzufügen - aber keiner scheint zu funktionieren. – quiderriereWoher kam dieser Code? (Sie haben ein extra "}" in dem geposteten Code, was bedeutet, dass es von einer Version des Map Codes kam, die eine 'initialize' oder' initMap' Methode hatte, die beim Laden der Seite (oder API load) lief) – geocodezip