Different coloured pins on map

[zarino]

On the search results page, which uses the standard Google Maps API, we'll need to pass an image option into the marker creation call, in hampshire.search_map.js:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(application.lat, application.lng),
  title: application.description,
  image: {
    url: '/assets/marker-' + status + '.png',
    size: new google.maps.Size(width, height),
    origin: new google.maps.Point(width/2,0),
    anchor: new google.maps.Point(right, down)
  },
  map: map
});

The individual application page uses Mapstraction, so I think it's just a matter of using the .setIcon() method (docs) on the marker once it's created in hampshire.maps.js:

marker = new mxn.Marker(point);
marker.setLabel(address);
marker.setIcon('/assets/marker-' + status + '.png', [width, height], [right, down]);
map.addMarker(marker);

[zarino]

I've added the images here, along with the javascript logic to show the right one depending on the application status: https://github.com/mysociety/planningalerts-app/commit/f60bd4d515637b5587955fe423817ebd21c03967

The application.status is successfully passed to the google maps loop on the search results page. But on the individual application page, I don't have access to the status inside the window.initialiseMaps() function. @lizconlan – can you work out a way of passing it in?

(In the meantime, I've set the javascript to show the grey "pending" marker, if no status is provided)

[stevenday]

I already added an extra (optional) parameter to the initialiseMaps function so that we can use our custom map styles, so I guess adding something else that lets you specify the custom pin icon path and icon label would be best? Maybe even passing in the whole marker object? (All this feels a bit hacky, like we should probably override the JS entirely, but then we have to duplicate their good work on other parts like the street view)