Google Maps

app.googlemaps = (function($){
  'use strict';

    // global var
    var map = null,
        baseMapOptions = {};


    // Asynchronously load google maps script with callback to load infobox and markerclusterer scripts
    $(window).load(function() {
        setTimeout(function() {
            if ( $('.js-hood-map').length || $('.js-map').length || $('.js-property-search-map') ) {
                var script = document.createElement('script');
                script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBB_9t84onBDSydB2CznoSqIN2jp0hFPcQ&callback=initAllMosaicMaps';
                document.getElementsByTagName('head')[0].appendChild(script);
            }
        },2000)
    })


    // Asynchronously load infobox and markerclusterer scripts
    // Only after they have loaded, initiate maps
    function initSequence() {
        var script = document.createElement('script');
        script.src = D7WP.templateUrl + '/src/js/vendor/LAB.min.js';
        script.onload = function() {
            $LAB
                .script(D7WP.templateUrl + '/src/js/vendor/infobox.js').wait()
                .script(D7WP.templateUrl + '/src/js/vendor/markerclusterer.js').wait(function(){
                    // Initiate .js-hood-map and .js-map
                    initAllMaps();
                    // Initiate .js-property-search-map map
                    app.propertySearch.bindMap();
                });
        };
        document.getElementsByTagName('head')[0].appendChild(script);
    }


    // Init all maps based on class
    function initAllMaps(){

        //generic map
        $('.js-map').each(function() {
            map = newMap( $(this) );
        });

    }


  /*
  *  newMap
  *
  *  This function will render a Google Map onto the selected jQuery element
  */
  function newMap( $el, mapOptions) {

    //baseOptions
    baseMapOptions = {
        // Base styles use 'Corporate' theme from Mosaic snazzy maps account
        styles: [{'featureType':'all','elementType':'labels.text.fill','stylers':[{'color':'#585858'},{'visibility':'on'}]},{'featureType':'administrative','elementType':'labels.text.fill','stylers':[{'color':'#444444'}]},{'featureType':'administrative.locality','elementType':'labels.text.fill','stylers':[{'color':'#585858'}]},{'featureType':'administrative.neighborhood','elementType':'labels.text.fill','stylers':[{'color':'#585858'}]},{'featureType':'landscape','elementType':'all','stylers':[{'color':'#eeeeee'}]},{'featureType':'poi','elementType':'all','stylers':[{'visibility':'off'}]},{'featureType':'poi','elementType':'labels','stylers':[{'color':'#007da4'},{'visibility':'off'}]},{'featureType':'poi','elementType':'labels.text.fill','stylers':[{'color':'#585858'}]},{'featureType':'poi','elementType':'labels.text.stroke','stylers':[{'visibility':'off'},{'color':'#ffffff'}]},{'featureType':'poi.park','elementType':'geometry.fill','stylers':[{'color':'#d7d7d7'},{'visibility':'on'}]},{'featureType':'poi.park','elementType':'labels','stylers':[{'visibility':'on'}]},{'featureType':'road','elementType':'all','stylers':[{'saturation':-100},{'lightness':45}]},{'featureType':'road','elementType':'labels.text.fill','stylers':[{'color':'#585858'}]},{'featureType':'road.highway','elementType':'all','stylers':[{'visibility':'simplified'}]},{'featureType':'road.highway','elementType':'geometry.fill','stylers':[{'color':'#ffffff'}]},{'featureType':'road.arterial','elementType':'labels.icon','stylers':[{'visibility':'off'}]},{'featureType':'transit','elementType':'all','stylers':[{'visibility':'off'}]},{'featureType':'water','elementType':'all','stylers':[{'color':'#b4b4b4'},{'visibility':'on'}]}],
        zoom: 16,
        clickableIcons: false,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
    };

    // var
    var $markers = $el.find('.marker');

    var options =  $.extend({}, baseMapOptions, mapOptions || {} );

    // create map
    var map = new google.maps.Map( $el[0], options);

    // add a markers reference
    map.markers = [];

    // map marker icons
    var icons = {
        counter: {
            size: {
                width: '30',
                height: '41'
            },
            anchor: {
                x: '15',
                y: '41'
            }
        },
        pin: {
            size: {
                width: '39',
                height: '53'
            },
            anchor: {
                x: '19',
                y: '53'
            }
        }
    };

    // add markers
    $markers.each(function(){

        if( $(this).attr('data-label') === 'counter' ) {

            icons[$(this).attr('data-label')].url = D7WP.templateUrl + '/images/'+ $(this).attr('data-theme') +'-counter.png';

            add_marker( $(this), map, icons[$(this).attr('data-label')], 'small-pin' );

        } else {

            icons[$(this).attr('data-label')].url = D7WP.templateUrl + '/images/'+ $(this).attr('data-theme') +'-pin.png';

            add_marker( $(this), map, icons[$(this).attr('data-label')], 'large-pin' );

        }

    });


    // center map
    centerMap( map );

    return map;

  }


  /*
  *  add_marker
  *
  *  This function will add a marker to the selected Google Map
  *
  */

  function add_marker( $marker, map, icon, iconType ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    if ( typeof icon !== 'undefined' ) {
        var customIconImage = {
            url: icon.url,
            scaledSize: new google.maps.Size(icon.size.width, icon.size.height),
            anchor: new google.maps.Point(icon.anchor.x, icon.anchor.y)
        };
    }

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        icon        : customIconImage,
        iconType    : iconType,
        label       : '',
        //Pass in data-attrs
        data        : $marker.data(),
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        var boxClasses = ['infoBox'];

        //add theme class if present
        if ( $marker.attr('data-theme') ) {
          boxClasses.push($marker.attr('data-theme'));
        }

        // If marker html contains data-style attribute, change to style attribute
        if ( $('[data-style]',$marker).length > 0 ) {
            var dataStyle = $('[data-style]',$marker).data('style');
            $('[data-style]',$marker).attr('style',dataStyle);
        }

        // create info window
        // docs: https://github.com/googlemaps/v3-utility-library/blob/master/infobox/docs/reference.html
        var infowindow = new InfoBox({
            boxClass: boxClasses.join(' '),  //note infoBox is the default
            closeBoxURL : '',
            content     : $marker.html(),
            pixelOffset: new google.maps.Size(-100, 20)
        });

        // On marker click
        google.maps.event.addListener(marker, 'click', function() {

            // Close the previously opened info window
            $('.infoBox').hide();

            infowindow.open( map, marker );

        });

        // On map click
        google.maps.event.addListener(map, 'click', function(event) {

            // close info window when map is clicked
            if(infowindow) {
                infowindow.close();
            }
        });

        google.maps.event.addListener(infowindow, 'domready', function(){

            // Fade in info window
            $('.info-window').hide().fadeIn('slow');

            // Allow overflow within infowindow
            // NOTE: not needed with InfoBox
            // $('.gm-style-iw').children().css('overflow','visible')
            // $('.info-window--image').parent().css('overflow','visible');

        });

    }

  }

  /*
  *  centerMap
  *
  *  This function will center the map, showing all markers attached to this map
  */

  function centerMap( map ) {

    var bounds = new google.maps.LatLngBounds();
    var visibleMarkers = map.markers.filter(function(marker){
            if (marker.iconType === 'large-pin'){
                return marker.map;
            }
      });

      // in case no large-pins are set ensure all markers are taken into consideration
      if(!visibleMarkers.length){
          var visibleMarkers = map.markers.filter(function(marker){
            return marker.map;
          });
      }


    // loop through all markers and create bounds
    $.each( visibleMarkers, function( i, marker ){
        bounds.extend( marker.position );
    });

    // only 1 marker?
    if( visibleMarkers.length === 1 ) {
        // set center of map
        map.setCenter( bounds.getCenter() );
        // map.setZoom( 16 );
        map.setZoom( 14 );

    } else {

        // fit to bounds
        map.fitBounds( bounds );

        if (!$('.js-hood-map').length){
            // pull map out one zoom level - on all BUT neighborhood map (.js-hood-map)
            var listener = google.maps.event.addListener(map, 'idle', function() {
                var oldZoom = map.getZoom();
                map.setZoom(oldZoom - 1);
                google.maps.event.removeListener(listener);
            });
        }

    }

  }


  return {
    newMap: newMap,
    centerMap: centerMap,
    initSequence: initSequence
  };

})(jQuery);

// Added to global scope so google maps callback can hit it
function initAllMosaicMaps(){
    app.googlemaps.initSequence()
}