I visited a friend in the city and he took me to Philz Coffee which felt a little like the soup nazi of Java.
You don’t put your own milk in. They do. They know best. They are experts.
Each cup is made individually. There isn’t a huge pot of coffee brewing that gets sloshed into your cup and throw over to you.
It shows too, as it tastes fantastic. I felt like i hadn’t tasted coffee before!
In honour of the new coffee shop that I just found, I whipped up a Google Map using the new version 2 API.
I wanted to play around, so I first setup the map, adding the controls for zooming and views (satellite, hybrid, just map):
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(37.761194, -122.430728);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.setCenter(point, 16);
Then I created a new icon using Philz logo:
// Create our "coffee" marker icon
var icon = new GIcon();
icon.image = "http://almaer.com/philzgmap/philmarker.png";
icon.iconSize = new GSize(26, 41);
icon.iconAnchor = new GPoint(30, -10);
icon.infoWindowAnchor = new GPoint(5, 1);
I setup the array of tabs to use on the marker:
// Our info window content
var infoTabs = [
new GInfoWindowTab("About Philz", "<div style='float: left; padding: 10px;'><a href='http://www.philzcoffee.com/'><img src='http://almaer.com/philzgmap/phillogo.png' border='0' /></a></div><>Philz Coffee in San Francisco has developed a devoted following, and for good reason.</p><p>The ten blends that are now available by the pound are the result of 25 years of coffee alchemy and invention.</p>"),
new GInfoWindowTab("Locations", "<div align='center' style='padding: 10px;'><a href='http://www.philzcoffee.com/'><img src='http://almaer.com/philzgmap/phillogo.png' border='0' /></a></div><div style='float: left'><b>Mission District</b><br/>3101 24th St. at Folsom St.<br/>Cafe: 415.282.9155</div><div style='float: right'><b>Castro District</b><br/>3901 18th St. at Sanchez<br/>Cafe: 415.552-8378</div>")
];
I wanted the usual click handling to show and hide the info box, and also wanted to turn it on by default so I forced it:
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs, {maxWidth: 400} );
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs, {maxWidth: 400} );
Nice and simple. If Philz gives me some free coffee then I would be willing to create a nice map widget for their locations for them to put on their about page