Maps API v3 Infowindows with multiple markers

http://stackoverflow.com/questions/24803074

by csornmo

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div class="map" id="map-canvas"></div>

CSS

html, body, #map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

/* Grey scale */
#map-canvas > div > div > div > div:first-child > div:not(:nth-child(4)) {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.gm-style .gm-style-iw-c {
  top: 30px;
  left: 30px;
  transform: translate(0, -50%);
  border-radius: 2px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.gm-style .gm-style-iw-t::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 21px;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
}

.gm-style-iw-t::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 20px;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(0, 0, 0, 0.1);
}

JavaScript

var myObj, i, j, x = "";
myObj = {
  "places": [
    {
      "name":"Plats 1",
      "position": [57.896184, 14.571875],
      "images":
      [{
        "src":"https://image.flaticon.com/icons/svg/503/503080.svg",
        "alt":"icon",
        "url": "#"
      },
       {
         "src":"https://image.flaticon.com/icons/svg/149/149060.svg",
         "alt":"icon",
         "url": "#"
       }]

    },
    {
      "name":"Plats 2",
      "position": [57.856184, 14.471875],
      "images":
      [{
        "src":"https://image.flaticon.com/icons/svg/503/503080.svg",
        "alt":"icon",
        "url": "#"
      },
       {
         "src":"https://image.flaticon.com/icons/svg/149/149060.svg",
         "alt":"icon",
         "url": "#"
       }]

    },

    {
      "name":"Plats 3",
      "position": [57.796184, 14.671875],
      "images":
      [{
        "src":"https://image.flaticon.com/icons/svg/503/503080.svg",
        "alt":"icon",
        "url": "#"
      },
       {
         "src":"https://image.flaticon.com/icons/svg/149/149060.svg",
         "alt":"icon",
         "url": "https://google.se"
       }]

    }
  ]
}


var map = '';


function initGmap() {

  // Laddar googlemaps om div:en --> #map-canvas finns
  if ( $('#map-canvas').length) {


    var styles = {
      default: null,
      hide: [
        {
          featureType: 'poi',
          stylers: [{visibility: 'off'}]
        },
        {
          featureType: 'transit',
          elementType: 'labels',
          stylers: [{visibility: 'off'}]
        }
      ]
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 10,
      scrollwheel: true,
      keyboardShortcuts: false
    });


    
    var marker, i;

		var bounds = new google.maps.LatLngBounds();

    var markers = [];
    var activeIcon = {
      url: 'https://we.ivc.group/images/18.303041af169501216098e29d/1552399864215/map-pin.svg',
     ...