fablabbcn/fablabs

<div class="border">
  <div id="sidemap" class="" style="min-height:600px"> </div>
</div>

<script>
  var map, infoWindow;
  function initMap() {

    infoWindow = new google.maps.InfoWindow;
    var locations = <%= raw @labs.to_json %>
    //console.log(locations)
    var marker, i;

    // Allow different icon_sizes, but default to 35 if not defined.
    var icon_size = <%= defined?(icon_size) ? icon_size : 35 %>;
    var center_lat = <%= defined?(center_lat) ? center_lat : 'undefined' %>;
    var center_lng = <%= defined?(center_lng) ? center_lng : 'undefined' %>;

    // If any of lat/lng are undefined, we default to first item location
    if(typeof center_lat === 'undefined' || typeof center_lng === 'undefined'){
      the_center = {lat: parseFloat(locations[0].latitude), lng: parseFloat(locations[0].longitude)}
    } else {
      the_center = {lat: center_lat, lng: center_lng}
    }

    //console.log(the_center);

    var image = {
      scaledSize: new google.maps.Size(icon_size, icon_size * 1.24 )
    };

    map = new google.maps.Map(document.getElementById('sidemap'), {
      center: the_center,
      mapTypeId: "OSM",
      mapTypeControl: false,
      streetViewControl: false,
      zoom: <%= defined?(zoom_level) ? zoom_level : 4 %>
    });

    // Define OSM map type pointing at the OpenStreetMap tile server
    // https://wiki.openstreetmap.org/wiki/Google_Maps_Example
    map.mapTypes.set("OSM", new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        // "Wrap" x (longitude) at 180th meridian properly
        // NB: Don't touch coord.x: because coord param is by reference, and changing its x property breaks something in Google's lib
        var tilesPerGlobe = 1 << zoom;
        var x = coord.x % tilesPerGlobe;
        if (x < 0) {
          x = tilesPerGlobe+x;
        }
        // Wrap y (latitude) in a like manner if you want to enable vertical infinite scrolling

        return "https://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
      },
      tileSize: new google.maps.Size(256, 256),
      name: "OpenStreetMap",
      maxZoom: 18
    }));

    for(var i in locations){
      if (locations[i].activity_status === 'active'){
        image.url = "<%= image_url('map-icons/active.png') %>";
      }else if (locations[i].activity_status === 'corona'){
        image.url = "<%= image_url('map-icons/corona.png') %>";
      } else {
        image.url = "<%= image_url('map-icons/closed.png') %>";
      }

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
        icon: image,
        title: locations[i].name,
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoWindow.setContent(
            "<a href='/labs/" + locations[i].slug + "'>" + locations[i].name + "</a><br/>" +
            "<b>Status: </b>" + locations[i].activity_status + "<br/>" +
            "<b>Kind: </b>" + locations[i].kind + "<br/>" +
            "<b>City: </b>" + locations[i].city + "<br/>"
          );
          infoWindow.open(map, marker);
        }
      })(marker, i));

    }

  }

</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap"> </script>