google maps - multiple - ekospol (http://www.ekospol.cz/byty/prodej-bytu-praha)

google-maps-multiple-w-animation.js

// Define your locations: HTML content for the info window, latitude, longitude
    var locations = [
      ['<div id="iw-container"><div class="iw-title">EKOCITY Hostivař</div><img src="http://www.ekospol.cz/assets/ekospol/ekocity_hostivar/vizualizace/4.jpg" alt="EKOCITY Hostivař" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/ekocity-hostivar/" class="button block-button primary" >Detail projektu</a></div></div>', 50.057417, 14.541753],
      ['<div id="iw-container"><div class="iw-title">Výhledy Barrandov</div><img src="http://www.ekospol.cz/assets/ekospol/vyhledy_barrandov/vyhledy-barrandov-viz.jpg" alt="Výhledy Barrandov" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/barrandov/" class="button block-button primary" >Detail projektu</a></div></div>', 50.031184, 14.362346],
      ['<div id="iw-container"><div class="iw-title">Panorama Kyje VIII</div><img src="http://www.ekospol.cz/assets/ekospol/panorama_kyje_viii/panorama-kyje-viii.jpg" alt="Panorama Kyje VIII" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/kyje-viii/" class="button block-button primary" >Detail projektu</a></div></div>', 50.115141, 14.567291],
      ['<div id="iw-container"><div class="iw-title">Viladomy Dubeč</div><img src="http://www.ekospol.cz/assets/ekospol/viladomy_dubec/viladomy-dubec.jpg" alt="Viladomy Dubeč" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/dubec/" class="button block-button primary" >Detail projektu</a></div></div>', 50.060931, 14.581599],
      ['<div id="iw-container"><div class="iw-title">EKOCITY Uhříněves I</div><img src="http://www.ekospol.cz/assets/ekospol/ekocity_uhrineves/ekocity-uhrineves.jpg" alt="EKOCITY Uhříněves I" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/ekocity-uhrineves/" class="button block-button primary" >Detail projektu</a></div></div>', 50.031954, 14.590639],
      ['<div id="iw-container"><div class="iw-title">Panorama Kyje VII</div><img src="http://www.ekospol.cz/assets/ekospol/panorama_kyje_vii/panorama-kyje-vii.jpg" alt="Panorama Kyje VII" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/kyje-vii/" class="button block-button primary" >Detail projektu</a></div></div>', 50.116056, 14.566058],
      ['<div id="iw-container"><div class="iw-title">Nové Měcholupy VI</div><img src="http://www.ekospol.cz/assets/ekospol/nove_mecholupy_vi/nove-mecholupy-vi.jpg" alt="Nové Měcholupy VI" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/mecholupy-vi/" class="button block-button primary" >Detail projektu</a></div></div>', 50.047834, 14.556056],
      ['<div id="iw-container"><div class="iw-title">Slunečné terasy</div><img src="http://www.ekospol.cz/assets/ekospol/slunecne_terasy/slunecne-terasy.jpg" alt="Slunečné terasy" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/slunecne-terasy/" class="button block-button primary" >Detail projektu</a></div></div>', 50.038257, 14.318665],
      ['<div id="iw-container"><div class="iw-title">Michelské zahrady</div><img src="http://www.ekospol.cz/assets/ekospol/michelske_zahrady/michelske-zahrady.jpg" alt="Michelské zahrady" width="100%"><div class="iw-content"><a href="http://www.ekospol.cz/byty/prodej-bytu-praha/michelske-zahrady/" class="button block-button primary" >Detail projektu</a></div></div>', 50.056753, 14.462231]
      ];   
    
    // When the window has finished loading create our google map below
            google.maps.event.addDomListener(window, 'load', init);  
    
 function init() {   
    // Setup the different icons and shadows
    var iconURLPrefix = 'http://www.ekospol.cz/assets/images/';
    
    var icons = [
      iconURLPrefix + 'home-green.png',
      iconURLPrefix + 'home-green.png',
      iconURLPrefix + 'home-green.png',
      iconURLPrefix + 'home-green.png',
      iconURLPrefix + 'home-green.png',
      iconURLPrefix + 'home-green.png',
      iconURLPrefix + 'home-green.png'
    ]
    var iconsLength = icons.length;

       var mapOptions = {
                    // How zoomed in you want the map to start at (always required)
                    zoom: 11,

                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(50.075452, 14.434719), // Prague
                    scrollwheel: false,
                    // How you would like to style the map. 
                    // This is where you would paste any style found on Snazzy Maps.
                    styles: [{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"color":"#f7f1df"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#d0e3b4"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.medical","elementType":"geometry","stylers":[{"color":"#fbd3da"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#bde6ab"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffe15f"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efd151"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"black"}]},{"featureType":"transit.station.airport","elementType":"geometry.fill","stylers":[{"color":"#cfb2db"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#a2daf2"}]}]
                };
// Get the HTML DOM element that will contain your map 
                // We are using a div with id="map" seen below in the <body>
                var mapElement = document.getElementById('map');

                // Create the Google Map using our element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);
    
                var infowindow = new google.maps.InfoWindow({
      //maxWidth: 172       
    });

    var markers = new Array();
    
    var iconCounter = 0;
    
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        animation: google.maps.Animation.DROP,
        map: map,
        icon: icons[iconCounter]
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      
     function stopAnimation(marker) {
    setTimeout(function () {
        marker.setAnimation(null);
    }, 740);
}
      
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= iconsLength) {
      	iconCounter = 0;
      }
    }
    
    // *
  // START INFOWINDOW CUSTOMIZE.
  // The google.maps.event.addListener() event expects
  // the creation of the infowindow HTML structure 'domready'
  // and before the opening of the infowindow, defined styles are applied.
  // *
  google.maps.event.addListener(infowindow, 'domready', function() {

    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    //* Since this div is in a position prior to .gm-div style-iw.
    // * We use jQuery and create a iwBackground variable,
    // * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
   // */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css({'display' : 'none'});

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': '#00673e 0px 1px 6px', 'z-index' : '1', 'background-color' : '#00673e'});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #00673e', 'border-radius': '13px', 'box-shadow': '0 0 5px #000000'});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($('.iw-content').height() < 140){
      $('.iw-bottom-gradient').css({display: 'none'});
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: '1'});
    });
  });

    function autoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      for (var i = 0; i < markers.length; i++) {  
				bounds.extend(markers[i].position);
      }
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    autoCenter();
    }