Mobile: Implement "View on Map" page

[smarziano]

Since we are switching the mobile experience to be focused on the list view over the map view (#693), we do want parents to see where locations are located. Therefore, we are creating a new "View on Map" mobile page that has:

• A map with a pinpoint for the location and the user’s location
• A “Get Directions” button that opens in the native maps application on the mobile device
• A “More Info” button that links to the location details page
• A Compare button

Here are some changes that need to be made based on what is currently on staging (above screenshot):

• [x] Update the font size of the center's name @amynicole
• [x] Update font of the address @amynicole
• [x] Start at a closer, more zoomed in view of map; currently I am able to see many community areas in the example above and I should really be able to tell how far a location is to my search pinpoint
• [x] Change button sizes @amynicole
• [ ] Create help text to show users that they need to use two fingers to move around the map >>> #902 ~Question: should "Get directions" use current location of the search location? (#521)~ ~Add "Back to results" link at top of page~

[smarziano]

Now on the View on Map page the view is more zoomed in, which is exactly as requested (in checklist item 3 above). However, I noticed that sometimes the center's pinpoint is off the view. This makes it seem like the blue pinpoint is the pinpoint for the center.

The logic of the zoom should be the closest zoom that still shows both pinpoints on the map. This is probably more complicated and will require extra time.

[amynicole]

Let's take the center name font down to 20px tall with 25 line height.

Let's use the regular height buttons.