custom-map.js

//using gmaps api to display locations with custom markers around vancouver
(function($) {
  var marker_data;

  $(document).ready(function() {
    var jqxhr = $.get(document.getElementById('special-issues--map-canvas').getAttribute('data-src'), {}, function(data) {
      marker_data = data;
    }, 'text')
    .error(function(jqXHR, textStatus, errorThrown) {
    }).done(function() {
        initialize();
    });

  });

  //map extends on mobile, shrinks when closed, toggle draggable functionality to prevent map from scrolling when not activated
  function rebind(map) {
    var element = document.getElementById("special-issues--map-canvas");
    $('#special-issues--map-canvas').on('click', function() {
      map.setOptions({draggable: true});
      if (window.innerWidth <= 960) {
        map.setOptions({draggable: true});
        $(this).before('<div class="close_me"></div>');
        $(this).toggleClass('map--extend').off('click');
        element.addEventListener("transitionend", function(event) {
          google.maps.event.trigger(map, 'resize');
        }, false);
        $('.special-issues--map').find($('.close_me')).on('click', function() {
          google.maps.event.trigger(map, "resize");
          $('#special-issues--map-canvas').toggleClass('map--extend');
          map.setOptions({draggable: true, zoom: 9});
          $(this).remove();
          rebind(map);
        });
      }
    });
  }

  function initialize() {
    var styles = [
      {
        "featureType": "administrative",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "landscape",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "administrative.neighborhood",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "hue": "#ff5500"
          }, {
            "saturation": 85
          }, {
            "lightness": -6
          }, {
            "gamma": 0.79
          }
        ]
      }, {
        "featureType": "poi",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "road",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      }, {
        "featureType": "transit",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "poi.park",
        "stylers": [
          {
            "visibility": "simplified"
          }, {
            "saturation": -30
          }, {
            "gamma": 1.91
          }, {
            "lightness": -21
          }
        ]
      }, {
        "featureType": "water",
        "stylers": [
          {
            "visibility": "simplified"
          }, {
            "hue": "#0088ff"
          }, {
            "lightness": -12
          }, {
            "saturation": -63
          }, {
            "gamma": 0.84
          }
        ]
      }, {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "gamma": 0.81
          }, {
            "visibility": "on"
          }, {
            "color": "#f4f4f6"
          }, {
            "lightness": 35
          }
        ]
      }, {
        "featureType": "road.arterial",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "saturation": 2
          }, {
            "lightness": 22
          }
        ]
      }, {
        "featureType": "road.local",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "weight": 1.5
          }, {
            "color": "#e7eaec"
          }, {
            "lightness": -7
          }
        ]
      }, {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "gamma": 0.81
          }, {
            "lightness": 1
          }, {
            "color": "#f7f6f6"
          }
        ]
      }, {
        "featureType": "poi.park",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "poi.park",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "hue": "#00ff99"
          }, {
            "gamma": 2.38
          }, {
            "saturation": -12
          }, {
            "lightness": -5
          }
        ]
      }, {
        "featureType": "transit.station",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "lightness": 53
          }, {
            "saturation": 75
          }
        ]
      }, {
        "featureType": "transit.station",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }, {
        "featureType": "landscape.natural",
        "stylers": [
          {
            "color": "#e7eaec"
          }, {
            "saturation": 7
          }, {
            "lightness": -2
          }, {
            "visibility": "on"
          }
        ]
      }, {
        "featureType": "road.arterial",
        "elementType": "geometry.stroke",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "color": "#ffffff"
          }, {
            "lightness": -16
          }
        ]
      }, {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
          {
            "visibility": "on"
          }, {
            "color": "#ffffff"
          }, {
            "lightness": -13
          }
        ]
      }, {
        "featureType": "transit.station.airport",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ];
    var prevInfoWindow,
      twitter_pics;
    var markers_venue = [];
    var markers_hood = [];
    var path = window.location.pathname.split('/');
    var isDraggable = window.innerWidth <= 960
      ? false
      : true;
    var twitter_pics;

    //Create Map
     if (window.innerWidth <= 960) {
      var mapOptions = {
        center: new google.maps.LatLng(49.197389, -122.716658),
        zoom: 9,
        styles: styles,
        zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_BOTTOM,
          style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
        draggable: isDraggable,
        fullscreenControl: false
      };
    } else {
      var mapOptions = {
        center: new google.maps.LatLng(49.179101, -122.703458),
        zoom: 10,
        minZoom: 9,
        styles: styles,
        zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_BOTTOM,
          style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
        draggable: isDraggable
      };
    }
    var map = new google.maps.Map(document.getElementById('special-issues--map-canvas'), mapOptions);

    rebind(map);

    var image_green = {
      url: '/sites/all/themes/straight2014/assets/img/map_pin_green.png',
      size: new google.maps.Size(27, 37),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(2, 35)
    };

    var image_blue = {
      url: '/sites/all/themes/straight2014/assets/img/map_pin_blue.png',
      size: new google.maps.Size(27, 37),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(2, 35)
    };

    var image_orange = {
      url: '/sites/all/themes/straight2014/assets/img/map_pin_orange.png',
      size: new google.maps.Size(27, 37),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(2, 35)
    };

    var image_purple = {
      url: '/sites/all/themes/straight2014/assets/img/map_pin_purple.png',
      size: new google.maps.Size(27, 37),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(2, 35)
    };
    var image_pink = {
      url: '/sites/all/themes/straight2014/assets/img/map_pin_pink.png',
      size: new google.maps.Size(27, 37),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(2, 35)
    };

    $(marker_data).find('marker').each(function() {
      var _this = $(this);

      //gets each marker position
      var latlng = new google.maps.LatLng(parseFloat(_this.attr('lat')), parseFloat(_this.attr('long')));
      // gets each marker status
      var status = _this.attr('status');

      var use_me = image_blue;

      if (status === 'Licensed by the City of Vancouver') {

        use_me = image_blue;

      } else if (status === 'Development Permit Issued') {

        use_me = image_green;

      } else if (status === 'Other') {

        use_me = image_pink;

      } else if (status == 'Outside of Vancouver') {

        use_me = image_purple;

      } else if (status == 'Religious exemptions apply') {

        use_me = image_orange;
      }

      var marker = new google.maps.Marker({position: latlng, map: map, icon: use_me});

      //load infowindow
      marker.infowindow = new google.maps.InfoWindow({content: _this.attr('info')});

      marker.status = status;

      //attach marker open/close event
      google.maps.event.addListener(marker, 'click', function(e) {
        if (prevInfoWindow) {
          prevInfoWindow.close();
        }

        info_html = $('<div/>').html(this.infowindow.content).contents();
        var venue_pic = info_html.find('div[class^="info-window-img twitterpic-for-"]').attr('class').match(/info-window-img twitterpic-for-(\d+)/);
        this.infowindow.open(map, marker);
        prevInfoWindow = this.infowindow;
      });

      markers_venue.push(marker);

    });

    //  loop through markers and find markers with status that matches selected status, remove all other markers
    $('#status').on('change', function() {
      var option = $(this).find('option:selected');
      var selected_status = option.text();

      for (i = 0; i < markers_venue.length; i++) {
        //show/hide by status
        var marker_status = $(markers_venue[i]).attr('status');

        if (selected_status == 'Sort by Permit Status' || marker_status == selected_status) {
          markers_venue[i].setVisible(true);
        } else if (marker_status != selected_status) {
          markers_venue[i].setVisible(false);
        }

        //change zoom levels
        if (selected_status == 'Sort by Permit Status' || selected_status == 'Outside of Vancouver') {
          if (window.innerWidth <= 960) {
            map.setOptions({
              center: new google.maps.LatLng(49.197389, -122.716658),
              zoom: 9
            });
          } else {
            map.setOptions({
              center: new google.maps.LatLng(parseFloat(option.data('lat')), parseFloat(option.data('long'))),
              zoom: 10
            });
          }
        }
        if (selected_status == 'Licensed by the City of Vancouver' || selected_status == 'Other' || selected_status == 'Development Permit Issued') {
          if (window.innerWidth <= 960) {
            map.setOptions({
              center: new google.maps.LatLng(49.249949, -123.126505),
              zoom: 11
            });
          } else {
            map.setOptions({
              center: new google.maps.LatLng(parseFloat(option.data('lat')), parseFloat(option.data('long'))),
              zoom: 12
            });
          }
        }
        if (selected_status == 'Religious exemptions apply') {
          if (window.innerWidth <= 960) {
            map.setOptions({
              center: new google.maps.LatLng(49.190546, -122.927458),
              zoom: 11
            });
          } else {
            map.setOptions({
              center: new google.maps.LatLng(parseFloat(option.data('lat')), parseFloat(option.data('long'))),
              zoom: 12
            });
          }
        }
      }
    });
    //on map reset
    $('.special-issues--map_nav').on('click', 'input[type="button"]', function() {
      //show all markers again
      for (i = 0; i < markers_venue.length; i++) {
        markers_venue[i].setVisible(true);
      }
      //reset zoom & center
      if (window.innerWidth <= 960) {
        map.setOptions({
          center: new google.maps.LatLng(49.224865, -122.913039),
          zoom: 9
        });
      } else {
        map.setOptions({
          center: new google.maps.LatLng(49.179101, -122.703458),
          zoom: 10
        });
      }
      //reset select dropdown
      $('#status option').prop('selected', function() {
        return this.defaultSelected;
      });
    });

  }

})(jQuery);