Monochrome OpenStreetMap for Event Pages

[huertanix]

No description provided.

[captDaylight]

hm, here is a good start http://www.evoluted.net/thinktank/web-design/custom-google-maps-colour
seems I need to do this in the js not as an embed

[huertanix]

Btw, do we want this monochrome like http://goruco.com/ or grayscale like some of the NYT interactives?

[captDaylight]

I think the grayscale looks nicer

On Sat, Aug 23, 2014 at 9:00 PM, David Huerta [email protected]
wrote:

Btw, do we want this monochrome like http://goruco.com/ or grayscale like
some of the NYT interactives?

—
Reply to this email directly or view it on GitHub
#139 (comment)
.

[huertanix]

Ok, so here's the issue with this task: Changing this to use grayscale or really anything is pretty easy. But the current, iframe Google Map uses a Place search as part of its parameters, so it displays a rectangular Place box in the upper-left.

To be able to use custom colors, we have to create the map using their JS Maps API. Google's Maps and Places API documentation makes Tolkien's books look like tweets and finding out how to get this specific layout out of the countless just-this-one-thing-by-itself functions has been nearly impossible. I'll be posting this on Stack Overflow too, but basically:

The now:

<iframe width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=45+rue+saint-roch,+paris,+france,+&amp;ie=UTF8&amp;markers=48.8664311,2.3329509&amp;ll=48.8664311,2.3329509&amp;&amp;z=13&amp;iwloc=near&addr&amp;&amp;output=embed"></iframe>

My attempt at using the JS API with the Places library (currently the info window won't even show):

  var map;
  var infowindow;
  var service;

  window.onload = function () {
    var latlng = new google.maps.LatLng(<%[email protected]%>,<%[email protected]%>);

    var styles = [
      {
        featureType: "all",
        elementType: "all",
        stylers: [
          { saturation: -100 }
        ]
      }
    ];

    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: false,
      styles: styles
    };

    map = new google.maps.Map(document.getElementById('venue-map'), myOptions);

    var request = {
      location: latlng,
      radius: '100',
      query: '<%[email protected]%>'
    };

    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);
    service.textSearch(request, callback);

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          var place = results[i];
          createMarker(results[i]);
        }
      }
    }

    function createMarker(place) {
      var placeLoc = place.geometry.location;
      var marker = new google.maps.Marker({
        map : map,
        position : place.geometry.location,
        reference : place.reference,
        name : place.name
      });

      google.maps.event.addListener(marker, 'click', onMarker_clicked);
    }

    function onMarker_clicked() {
      var marker = this;

      service.getDetails({
        reference : marker.get("reference")
      }, function(result) {
        var html = marker.get("name") + "<br />" + market.get("formatted_address");
        if (result && "website" in result) {
          marker.set("url", result.website);
        }

        if (marker.get("url")) {
          html = "<a href='" + marker.get("url") + "' target=_blank>" + html + "</a>";
        }
        infowindow.setContent(html);
        infowindow.open(map, marker);
      });
    }
  }

Fuck Google Maps.