gMaps - Implementations

BSIT-gMaps.html

 <!-- 
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple#try-it-yourself 
http://hpneo.github.io/gmaps/
-->
<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="/bower_components/gmaps/gmaps.js" type="text/javascript"></script>

<script type="text/javascript">
/** GOOGLE MAPS **/
INSPIRO.maps = function () {
	if ($map.exists()) {
		$map.each(function () {
			var $elem = $(this),
				mapAddress = $elem.attr('data-map-address') ? $elem.attr('data-map-address') : "Melbourne, Australia",
				mapType = $elem.attr('data-map-type') ? $elem.attr('data-map-type') : "ROADMAP",
				mapZoom = $elem.attr('data-map-zoom') ? $elem.attr('data-map-zoom') : "14",
				mapIcon = $elem.attr('data-map-icon') ? $elem.attr('data-map-icon') : "images/markers/marker2.png";
	
				var markers = [{
					address: mapAddress,
					html: mapAddress,
					icon: {
						image: mapIcon,
						iconsize: [40, 63],
						iconanchor: [18, 60],
					},
	            }];
	
				$elem.gMap({
					address: mapAddress,
					maptype: mapType,
					markers: markers,
					zoom: Number(mapZoom),
					doubleclickzoom: true,
					controls: {
						panControl: true,
						zoomControl: true,
						mapTypeControl: true,
						scaleControl: true,
						streetViewControl: true,
						overviewMapControl: true
					}
				});
			});
		}
};
</script>

<!-- COLORED gMaps -->
<script type="text/javascript">
	function google_maps_5710e8ed20a83() {
        var latlng = new google.maps.LatLng(44.095594, 12.527350);
        var draggable = true;
        var myOptions = {
            zoom: 18,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [{
                "featureType": "landscape",
                "elementType": "labels",
                "stylers": [{
					"visibility": "off"
				}]
			}, {
                "featureType": "transit",
                "elementType": "labels",
                "stylers": [{
					"visibility": "off"
				}]
			}, {
                "featureType": "poi",
                "elementType": "labels",
                "stylers": [{
                    "visibility": "off"
				}]
			}, {
                "featureType": "water",
                "elementType": "labels",
                "stylers": [{
                    "visibility": "off"
				}]
			}, {
                "featureType": "road",
                "elementType": "labels.icon",
                "stylers": [{
					"visibility": "off"
				}]
			}, {
                "stylers": [{
						"hue": "#ff0"
					}, {
						"saturation": -40
					}, {
						"gamma": 1
					}, {
						"lightness": 20
					}
				]
			}, {
                "featureType": "road",
                "elementType": "labels.text.fill",
                "stylers": [{
					"visibility": "on"
					}, {
						"lightness": 24
					}
				]
			}, {
                "featureType": "road",
                "elementType": "geometry",
                "stylers": [{
                    "lightness": 57
				}]
			}],
            draggable: draggable,
            zoomControl: true,
            mapTypeControl: false,
            streetViewControl: true,
            scrollwheel: false
        };
        var map = new google.maps.Map(document.getElementById("google-map-area-5710e8ed20a83"), myOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        var infowindow = new google.maps.InfoWindow({
			maxWidth: 350,
		});
		google.maps.event.addListener(marker, 'click', (function(marker) {
			return function() {
				infowindow.setContent('');
				infowindow.open(map, marker);
			}
		})(marker));
    }
    jQuery(document).ready(function($) {
        google_maps_5710e8ed20a83();
    });
</script>


<!-- FromSimoncelli - Multiple and with info windows -->
<script type="text/javascript">
	var locations = [
		["<div class='kode-event-list-2'><div class='kode-thumb'><a href='#'><img src='/theme_fe_new/images/logo-2.png' alt=''></a></div><div class='kode-text'><h2>Marco Simoncelli Fondazione</h2><p class='title'>Via Emilia, 9 Riccione</p><a href='#' class='btn-filled'>Leggi tutto</a></div></div>" , 44.006723, 12.635750],      	
	];
	// Setup the different icons and shadows
	var iconURLPrefix = 'images';
	var icons = [
		'/theme_fe_new/images/pin1.png', 
		'/theme_fe_new/images/pin1.png', 
		'/theme_fe_new/images/pin1.png', 
		'/theme_fe_new/images/map-icon-2.png', 
		'/theme_fe_new/images/map-icon-2.png', 
		'/theme_fe_new/images/map-icon-2.png', 
	];

	var icons_length = icons.length;
	var shadow = {
		anchor: new google.maps.Point(16,16),
		url: iconURLPrefix + 'msmarker.shadow.png'
	};

	var myOptions = {
		center: new google.maps.LatLng(44,12.5),
		mapTypeId: 'roadmap',
		mapTypeControl: true,
		streetViewControl: true,
		panControl: true,
		scrollwheel: false,
		draggable: true,

		styles: [{
			stylers: [{
				hue: '#000000'
			}, {
				saturation: -300
			}, {
				lightness: 1
			}]
		}],
		zoom: 10,
	}
	
	// infowindow
	var map = new google.maps.Map(document.getElementById("map_list"), myOptions);
	var infowindow = new google.maps.InfoWindow({
  		maxWidth: 350,
	});
	var marker;
	var markers = new Array();
	var iconCounter = 0;

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

		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));
	  
	  	iconCounter++;
		// We only have a limited number of possible icon colors, so we may have to restart the counter
	  	if(iconCounter >= icons_length){
			iconCounter = 0;
		}
	}
</script>

<script>
var PageContact = function () {
    var _latlon = [44.014334, 12.644122],
        iw_title = 'Hotel Ravello', 
        iw_html = '<h3>Hotel Ravello</h3><p>Viale Rapallo, 3, Marebello di Rimini (RN) '+
            '<br>'+
            'Tel: <a href="tel:+390541373119">+39 0541 373119</a>, ' + 
            'Mob: <a href="tel:+393342556800">334 2556800</a> ' +
            '<br>'+
            'Email: <a href="mailto:info@hotelravello.com">info@hotelravello.com</a>'+
            '</p>';

    var _init = function () {
            var map = new GMaps({
                div: '#gmap',
                lat: _latlon[0],
                lng: _latlon[1],
                //scrollwheel: false
                zoomControl: true,
                zoomControlOpt: {
                    style: 'SMALL',
                    position: 'TOP_LEFT'
                },
                panControl: true,
                streetViewControl: true,
                mapTypeControl: true,
                overviewMapControl: true
            });
            var marker = map.addMarker({
                lat: _latlon[0],
                lng: _latlon[1],
                title: iw_title,
                infoWindow: {
                    content: iw_html

                },
                //mouseover: function(e) {
                //    this.infoWindow.open(this.map, this);
                //}
            });

            marker.infoWindow.open(map.map, marker);
            map.setCenter(_latlon[0], -_latlon[1]);
        };
			
        /* var _direction = function (from, map) {

            map.setOptions({scrollwheel:true});

            map.cleanRoute();

            map.removeMarkers();

            map.addMarker({
                lat: _latlon[0],
                lng: _latlon[1],
                title: 'Hotel Panoramic',
                infoWindow: {
                    content: '<h3>Hotel Panoramic</h3><p>Via D&#39;Annunzio, 109, Riccione RN</p>'
                }
            });
            map.addMarker({
                lat: from[0],
                lng: from[1],
                title: 'Destinazione'
            });

            map.drawRoute({
                origin: from,
                destination: ll_hotel,
                travelMode: 'driving',
                strokeColor: '#34B2DB',
                strokeOpacity: 0.6,
                strokeWeight: 6
                // step: function(e) {
                //     $('#instructions').append('<li>'+e.instructions+'</li>');
                //
                //     // $('#instructions li:eq(' + e.step_number + ')').delay(450 * e.step_number).fadeIn(200, function() {
                //     //     map.drawPolyline({
                //     //         path: e.path,
                //     //         strokeColor: '#131540',
                //     //         strokeOpacity: 0.6,
                //     //         strokeWeight: 6
                //     //     });
                //     // });
                // }
            });
        };*/

        return {
            //main function to initiate the module
            init: function () {
                _init();
            },
            direction: function (from) {
                _direction(from);
            }
        };
    }();

    $(document).ready(function () {
        PageContact.init();
    });
</script>

//----------------------------------------------------/
// UTILITIES
//----------------------------------------------------/

//Check if function exists
$.fn.exists = function () {
	return this.length > 0;
};