title: Google Maps: Add Multiple Markers with Info box to Custom map
body: <p>hi i´m quite new to the topic and after a few hours trying i´m close to the goal, but not there i think i would need a little kick.</p>
  
  <p>so far i was able to create a styled map and get 2 markers in position on the map.
  zoom and some other stuff is clear to me how to influence.</p>
  
  <p>here is the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt; 
  &lt;title&gt; test map &lt;/title&gt;
  
  &lt;style type="text/css"&gt;
          #map {
              width: 750px;
              height: 500px;
          }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
      google.maps.event.addDomListener(window, 'load', init);
  
      function init()
      {
  
      var mapOptions = {
          zoom: 2,
          panControl: true,
          zoomControl: true,
          center: new google.maps.LatLng(33.524385, -112.048899),
          // 
          styles: [
          {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 17}]}, {
              "featureType": "landscape",
              "elementType": "geometry",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 20}]}, {
              "featureType": "road.highway",
              "elementType": "geometry.fill",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 17}]}, {
              "featureType": "road.highway",
              "elementType": "geometry.stroke",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 29}, {
                  "weight": 0.2}]}, {
              "featureType": "road.arterial",
              "elementType": "geometry",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 18}]}, {
              "featureType": "road.local",
              "elementType": "geometry",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 16}]}, {
              "featureType": "poi",
              "elementType": "geometry",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 21}]}, {
              "elementType": "labels.text.stroke",
              "stylers": [
              {
                  "visibility": "on"}, {
                  "color": "#000000"}, {
                  "lightness": 16}]}, {
              "elementType": "labels.text.fill",
              "stylers": [
              {
                  "saturation": 36}, {
                  "color": "#000000"}, {
                  "lightness": 40}]}, {
              "elementType": "labels.icon",
              "stylers": [
              {
                  "visibility": "off"}]}, {
              "featureType": "transit",
              "elementType": "geometry",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 19}]}, {
              "featureType": "administrative",
              "elementType": "geometry.fill",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 20}]}, {
              "featureType": "administrative",
              "elementType": "geometry.stroke",
              "stylers": [
              {
                  "color": "#000000"}, {
                  "lightness": 17}, {
                  "weight": 1.2}]}]
      };
  
      var mapElement = document.getElementById('map');
  
      var myMap = new google.maps.Map(mapElement, mapOptions);
  
  
      var pos = new google.maps.LatLng(33.524385, -12.048899);
      var poi_marker = new google.maps.Marker(
      {
          map: myMap,
          draggable: false,
          animation: google.maps.Animation.DROP,
          position: pos
      });
  
      var pos = new google.maps.LatLng(5.524385, -12.048899);
      var poi_marker = new google.maps.Marker(
      {
          map: myMap,
          draggable: false,
          animation: google.maps.Animation.DROP,
          position: pos
  
  
  
      });
  
  } 
  &lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt;
  
  &lt;div id="map"&gt; &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>what works fine for me.
  i see the style i like plus 2 positions with the classic marker.</p>
  
  <p>Map from code above <a href="http://the3rdlevel.com/html/samples/test-6.html/%22Map%20Sample%22" rel="nofollow">Sample</a> </p>
  
  <p>then i looked a bit more around and found out that you can have info boxes with markers.
  i would like to add HTLM to those boxes for each marker i create.</p>
  
  <p>the google rep. gives this example which works fine for me:</p>
  
  <p><a href="https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en</a></p>
  
  <p>i would like to add a couple of those to my map like i did on the 2 simple marker postions, but i honestly do not know where to place the code i see in the above link.</p>
  
  <p>tried all kinds for the last 2h and now feed up. i do something wrong, as this should work.</p>
  
  <p>the cherry on the candy would then, if someone would know, where to place the code for giving the Marker my own style. i have found some examples for that. so i would be cool to have it custom all the way.</p>
  
  <p>thx for your help, ideas or whatever you contribute! </p>