在带有标记的地图上添加菜单项(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 &ouml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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&uuml;lerinnen und Sch&uuml;ler aus Mittel- und Oberstufe bespielen dabei einen Nachmittag lang die Innenstadt von Brugg mit k&uuml;nstlerischen Interventionen. Im Vorfeld setzen sie sich in Workshops mit den Themenbereichen «&Ouml;ffentlicher Raum» und «Tempor&auml;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>