Kcko
2/18/2017 - 8:02 PM
google maps - multiple - ekospol (http://www.ekospol.cz/byty/prodej-bytu-praha)
google maps - multiple - ekospol (http://www.ekospol.cz/byty/prodej-bytu-praha)
// 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();
}