$('#collapseMap').on('shown.bs.collapse', function(e){ (function(A) { if (!Array.prototype.forEach) A.forEach = A.forEach || function(action, that) { for (var i = 0, l = this.length; i < l; i++) if (i in this) action.call(that, this[i], i, this); }; })(Array.prototype); var mapObject, markers = [], markersData = { 'Walking': [ { name: 'Suite Apartment Cavour', location_latitude: 37.730958, location_longitude: 15.198760, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Suite Apartment Cavour.jpg', name_point: 'Suite Apartment Cavour', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '30-location-suite-apartment-cavour.php' }, { name: 'Suite Apartment Giulia', location_latitude: 37.72510, location_longitude: 15.19080, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Suite Apartment Giulia.jpg', name_point: 'Suite Apartment Giulia', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '36-location-suite-apartment-giulia.php' }, { name: 'Villa Trinacria', location_latitude: 37.765904, location_longitude: 15.173229, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Villa Trinacria.jpg', name_point: 'Villa Trinacria', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '5-location-villa-trinacria.php' }, { name: 'Villa Luna Rossa ', location_latitude: 37.748097, location_longitude: 15.207015, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Villa Luna Rossa .jpg', name_point: 'Villa Luna Rossa ', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '3-location-villa-luna-rossa.php' }, { name: 'Suite Apartment Isabella ', location_latitude: 37.853560, location_longitude: 15.301797, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Suite Apartment Isabella .jpg', name_point: 'Suite Apartment Isabella ', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '16-location-suite-apartment-isabella.php' }, { name: 'Suite Apartment Zaffiro', location_latitude: 37.713445, location_longitude: 15.172274, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Suite Apartment Zaffiro.jpg', name_point: 'Suite Apartment Zaffiro', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '33-location-suite-apartment-zaffiro.php' }, { name: 'Suite Apartment Rubino', location_latitude: 37.713445, location_longitude: 15.172274, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Suite Apartment Rubino.jpg', name_point: 'Suite Apartment Rubino', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '32-location-suite-apartment-rubino.php' }, { name: 'Apartment in Villa Panorama', location_latitude: 37.824082, location_longitude: 15.232865, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Apartment in Villa Panorama.jpg', name_point: 'Apartment in Villa Panorama', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '14-location-apartment-in-villa-panorama.php' }, { name: 'Suite Apartment Smeraldo', location_latitude: 37.713445, location_longitude: 15.172274, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Suite Apartment Smeraldo.jpg', name_point: 'Suite Apartment Smeraldo', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '37-location-suite-apartment-smeraldo.php' }, { name: 'Suite Apartment Acquamarina', location_latitude: 37.709439, location_longitude: 15.218228, map_image_url: 'js/temp/thumb_mappa_suntripsicily_location_Suite Apartment Acquamarina.jpg', name_point: 'Suite Apartment Acquamarina', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '20-location-suite-apartment-acquamarina.php' }, ], 'experience': [ { name: 'Home Restaurant', location_latitude: 37.621019, location_longitude: 15.129797, map_image_url: 'js/temp/thumb_mappa_suntripsicily_experience_18.jpg', name_point: 'Home Restaurant', description_point: '', get_directions_start_address: '', phone: '+393927661318', url_point: '18-experience-home-restaurant.php' } ] }; var coords = "37.730958,15.198760|37.72510,15.19080|37.765904,15.173229|37.748097,15.207015|37.853560,15.301797|37.713445,15.172274|37.713445,15.172274|37.824082,15.232865|37.713445,15.172274|37.709439,15.218228|"; var filteredtextCoordinatesArray = coords.split('|'); centerLatArray = []; centerLngArray = []; for (i=0 ; i < filteredtextCoordinatesArray.length ; i++) { var centerCoords = filteredtextCoordinatesArray[i]; var centerCoordsArray = centerCoords.split(','); if (isNaN(Number(centerCoordsArray[0]))) { } else { centerLatArray.push(Number(centerCoordsArray[0])); } if (isNaN(Number(centerCoordsArray[1]))) { } else { centerLngArray.push(Number(centerCoordsArray[1])); } } var centerLatSum = centerLatArray.reduce(function(a, b) { return a + b; }); var centerLngSum = centerLngArray.reduce(function(a, b) { return a + b; }); var centerLat = centerLatSum / filteredtextCoordinatesArray.length ; var centerLng = centerLngSum / filteredtextCoordinatesArray.length ; console.log(centerLat); console.log(centerLng); var mapOptions = { zoom: 8, /*center: new google.maps.LatLng(37.709439, 15.218228),*/ center: new google.maps.LatLng(37.574841, 14.255670), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_CENTER }, panControl: false, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_LEFT }, scrollwheel: false, scaleControl: false, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT }, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP }, styles: [ { "featureType": "landscape", "stylers": [ { "hue": "#FFBB00" }, { "saturation": 43.400000000000006 }, { "lightness": 37.599999999999994 }, { "gamma": 1 } ] }, { "featureType": "road.highway", "stylers": [ { "hue": "#FFC200" }, { "saturation": -61.8 }, { "lightness": 45.599999999999994 }, { "gamma": 1 } ] }, { "featureType": "road.arterial", "stylers": [ { "hue": "#FF0300" }, { "saturation": -100 }, { "lightness": 51.19999999999999 }, { "gamma": 1 } ] }, { "featureType": "road.local", "stylers": [ { "hue": "#FF0300" }, { "saturation": -100 }, { "lightness": 52 }, { "gamma": 1 } ] }, { "featureType": "water", "stylers": [ { "hue": "#0078FF" }, { "saturation": -13.200000000000003 }, { "lightness": 2.4000000000000057 }, { "gamma": 1 } ] }, { "featureType": "poi", "stylers": [ { "hue": "#00FF6A" }, { "saturation": -1.0989010989011234 }, { "lightness": 11.200000000000017 }, { "gamma": 1 } ] } ] }; var marker; mapObject = new google.maps.Map(document.getElementById('map'), mapOptions); for (var key in markersData) markersData[key].forEach(function (item) { marker = new google.maps.Marker({ position: new google.maps.LatLng(item.location_latitude, item.location_longitude), map: mapObject, icon: 'img/pins/' + key + '.png', }); if ('undefined' === typeof markers[key]) markers[key] = []; markers[key].push(marker); google.maps.event.addListener(marker, 'click', (function () { closeInfoBox(); getInfoBox(item).open(mapObject, this); mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude)); })); }); function hideAllMarkers () { for (var key in markers) markers[key].forEach(function (marker) { marker.setMap(null); }); }; function closeInfoBox() { $('div.infoBox').remove(); }; function getInfoBox(item) { return new InfoBox({ content: '
' + 'Image' + '

'+ item.name_point +'

' + ''+ item.description_point +'' + '
' + '
' + ''+ item.phone +'' + '
' + 'Details' + '
', disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size(10, 125), closeBoxMargin: '5px -20px 2px 2px', closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", isHidden: false, alignBottom: true, pane: 'floatPane', enableEventPropagation: true }); }; });