title: Google Maps: How to create a infowindow for custom markers?
body: <p>I'm making a google maps for a website with custom markers. The markers are made but I need infoboxes for each individual marker to open when a marker is clicked. I've searched on the internet and tried alot of things but it wont work. </p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        html, body, #map {
          width:700px;
    height:600px;
    border-radius:5px;
    margin-left:auto;
    margin-right:auto;
        }
        #legend {
          font-family: Arial, sans-serif;
          background: #fff;
    opacity:0.85;
          padding: 10px;
          margin: 10px;
          border: 1px solid #000;
    border-radius:5px;
        }
        #legend h3 {
          margin-top: 0;
        }
        #legend img {
          vertical-align: middle;
        }
      &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var map;
        function initialize() {
          map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: new google.maps.LatLng(51.99683352, 5.88360088),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
          });
  
          var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
          var icons = {
      camping: {
              name: 'Camping',
              icon: iconBase + 'campground_maps.png'
            },
      grocery: {
              name: 'Supermarkt',
              icon: iconBase + 'grocery_maps.png'  
          
            },
            dining: {
              name: 'Restaurant',
              icon: iconBase + 'dining_maps.png'
            },
            snack_bar: {
              name: 'Snackbar',
              icon: iconBase + 'snack_bar_maps.png'
            },
      swimming: {
              name: 'Zwembad',
              icon: iconBase + 'swimming_maps.png'
            },
      museum: {
              name: 'Museum',
              icon: iconBase + 'museum_maps.png'
      },
      parks: {
              name: 'Landgoed',
              icon: iconBase + 'parks_maps.png'
      },
      hospitals: {
              name: 'Ziekenhuis',
              icon: iconBase + 'hospitals_maps.png'
            }
          };
  
          function addMarker(feature) {
            var marker = new google.maps.Marker({
              position: feature.position,
              icon: icons[feature.type].icon,
              map: map
            });
          }
  
          var features = [
            {
              position: new google.maps.LatLng(52.0072118, 5.87047509),
              type: 'camping'
            }, {
              position: new google.maps.LatLng(52.00030944, 5.8805877),
              type: 'dining'
            }, {
              position: new google.maps.LatLng(51.99683352, 5.88360088),
              type: 'dining'
            }, {
              position: new google.maps.LatLng(51.962503, 5.90451),
              type: 'swimming'
      }, {
              position: new google.maps.LatLng(51.9956291, 5.9225834),
              type: 'swimming'
      }, {
              position: new google.maps.LatLng(51.98811773, 5.89362323),
              type: 'grocery'
      }, {
              position: new google.maps.LatLng(51.99012513, 5.89376865),
              type: 'grocery'
      }, {
              position: new google.maps.LatLng(52.009949, 5.906641),
              type: 'museum'
      }, {
              position: new google.maps.LatLng(51.988764, 5.901436),
              type: 'museum'
      }, {
              position: new google.maps.LatLng(52.02687639, 5.87179417),
              type: 'museum'
      }, {
              position: new google.maps.LatLng(51.987706, 5.832719),
              type: 'museum'
      }, {
              position: new google.maps.LatLng(52.03369001, 5.86739123),
              type: 'parks'
      }, {
              position: new google.maps.LatLng(51.9911136, 5.8907901),
              type: 'snack_bar'
      }, {
              position: new google.maps.LatLng(52.001069, 5.910066),
              type: 'hospitals'
            }
          ];
  
          for (var i = 0, feature; feature = features[i]; i++) {
            addMarker(feature);
          }
  
          var legend = document.getElementById('legend');
          for (var key in icons) {
            var type = icons[key];
            var name = type.name;
            var icon = type.icon;
            var div = document.createElement('div');
            div.innerHTML = '&lt;img src="' + icon + '"&gt; ' + name;
            legend.appendChild(div);
          }
  
          map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
        }
  
        google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;div id="legend"&gt;&lt;h3&gt;Legenda&lt;/h3&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does someone have any suggestions how to make the infoboxes work? </p>