“I don’t know the difference between them” The definition of pain…
Feb 21

Philz Coffee and Google Maps

Tech Add comments

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

5 Responses to “Philz Coffee and Google Maps”

  1. Eric Says:

    Man, you’re a geek :)

    Glad you could make it to the city. Let’s get together at Philz again soon.

  2. Todd Huss Says:

    I live a half mile from Philz with many cheaper coffee places nearer but any opportunity I get I still make the trip and spend $3 to get my Philz fix. That stuff is the bomb! I’ve been trying to reproduce a cup at home by using the heavy whipping cream they use but I just can’t do an accurate reproduction yet!

  3. Brad Neuberg Says:

    I *love* Philz coffee — Phil himself is a character. It was great seeing you at the YUI event! Don’t be a stranger — if you ever want to grab a beer call me at 510-938-3263.

    Best,
    Brad

  4. replicahandbags Says:

    google maps shocked me

  5. chanel replica handbags Says:

    I am too..very good..

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: Type in the word 'ajax'