When it comes to describing what a good logo is, this old saying comes in handy: “A good logo is a dead logo”… Uhm, well, ok I’m just kidding :). Actually, it’s quite the opposite.

A good logo is a logo that lives.

The collection below features great, creative logos that have a message hidden. They try to convey that message through type, shape, negative space, and by triggering image and/or meaning associations in our minds. Enjoy!

I realize not everyone gets it from the moment they look at it for the first time, so I allowed myself to add a short description to every logo.

1) Doghouse Brewing Co.

This logo utilizes negative space. As in the name, we see a dog house, and the brewing element is incorporated into logo by having a beer mug shaped entry to the dog house (which is accented with the mug’s handle and stand).

2) Matrimony

Another use of negative space. The holes between M’s legs are actually people holding hands, which expresses what matrimonial bureaus stand for – helping people find each other and fall in love.

3) Pizza Time

The clock’s board is actually a pizza, so it’s kind of like the clock’s hand says: “It’s time for pizza”.

4) Cloud Corner

Clouds are round, but corners are edgy; the corner here is nicely separated from this cloud’s round shape. Also, the colors from the name are nicely reflected on the cloud and its corner.

5) Bee

The B’s shape is formed by bee swarm.

6) Beercation

People associate vacation with traveling, and so this travel bag is actually a beer mug, with handle and wheels – which nicely reflects the logo’s name.

7) Love Clip

The logo’s shape is a heart, which stands for the “love” part of the name, and it’s made from a clip, which of course stands for the “clip” part.

8) Fly

This one is really good. Its shape is an “F” letter, rotated in away so that it reminds an air plane up in the air.

9) Fitmiss

Fitmiss logo combines two shapes: barbells and female sex sign. Of course, barbells shape stands for the “fit(ness)” part, and the female sex sign stands for “miss”.

10) Fold It

The logo’s is a folded “F” letter. Couldn’t be more obvious.

11) Families

This one is great: the middle part of the word “families”, the letters “i”, “l”, and “i” are actually very simplified shapes of people. The biggest one is the father, the mid-size is the mother, and the smallest one is a child – a family.

12) The Golf Park

The logo’s shape is a tree, but with a golf stick as a tree’s trunk.

13) Heart Build Foundation

The logo is a shovel (which is associated with building) with a heart at the end. So there you are, heart + building.

14) Invisible Agents

This one is one of my favourites: those lines look almost the same. Almost, because the middle one is slightly different, it’s tie-shaped. First of all, agents wear ties :). Second of all, good agent can blend in so good that it’s really hard to spot him. And that’s what this subtle middle line difference stands for.

15) Killed Productions

The “i” of the “killed” word lies on the ground. Like it’s, well, killed :).

16) Locks

This one is kind hard to explain. You know locks have those little triggers inside them, and when you turn the key, those trigger rotate, causing it to lock. Now, look at letters “o” and “c”. That ring a bell?

17) Mister Cutts Baber Shop

Mister Cutts literally IS the logo. It looks like a mister with eyeglasses and mustache, but that’s actually a scissors upside down.

18) Wine Searcher

The name here reflects nicely in the shape. The shape consists from two wine bottles, but without the inner lines. This make it look like eyeglasses – and you often put eyeglasses on when you’re searching for something.

19) Newcastle Food & Wine Festival

Another creative use of negative space. The white shape is a fork, which stands for the “food” part, and the fork teeth are the shapes of wine bottles, which of course stands for the “wine” part.

20) CinemaCafe

A coffee cup made of a film reel. Yup, a Cinema Cafe cup.

21) Baloon Chef

The balloon is actually a chef’s hat, and the balloon’s basket is a chef’s apron with kitchen utilities attached to it.

22) Cowbra Productions

A game of words. The logo is a cow, but with zebra stripes; a Cow-Bra.

23) CityCliq

The city here is actually a hand cursor we see on computers, simulating a “click” on the sun above the city.

24) Dig for Saint Michael’s

Another shovel here. Shovel itself stands for the “dig” part. It’s made from two elements people usually associate with saints: a cross, and a stained glass windows you usually see in churches.

25) Iron Duck Clothing

The “clothing” part is reflected by a hanger. Most hangers are made from iron, plus it has a duck-shaped hook. So it’s an iron duck hanger. So it’s Iron Duck Clothing.

26) MonKey

A good one, another game of words. “Monkey” has a word “key” in it already, so there couldn’t be a more obvious logo than a key with a monkey-shaped head.

27) Martini House

Yet another creative use of negative space. We see two martini glasses standing right next to each other – forming the space between them into a house. And there you go, Martini House.

28) Filmurbia

This logo is a nice combinations of concepts from the CinemaCafe and CityCliq logos. The city here, the buildings to be exact, are made from a movie reel too.

29) ChemisTree

One more game of words. The name is a combinations of words “chemistry” and “tree”. And so the logo reflects it in this weird tree – the trunk is actually a test tube, and a cloud of fumes that is often produced in chemical experiments represents the upper branches.

30) Black Cat

One of my favourites. When you first look at it, you might say “nothing fancy here”. Just two words, taken out of the name, and rotated 90 degrees. There’s nothing to it, right? Wrong! Look at letters “C” in both words. They are actually cat’s eyes :).

31) Brain Finger

A finger print in a shape of a brain, a brain-finger.

32) uReach Media

I like the concept here, this one triggers meaning associations in our minds. The logo is U-shaped, which obviously reflects the “uReach” part of the name. Also, letter “u” is commonly used as a replacement for “you”. The “U” has hands on both ends, which triggers in our minds a meaning association: reaching out for something. So it’s like “you reach out for media” -> uReach Media.

33) Econergy

Quite obvious one. The logo is “e” shaped power cable with a leaf at the end. “E” stands for “eco”, and the cable for “energy”. Eco-Energy.

34) Rocket Golf

Awesome use of negative space. The “golf” part is reflected in two tees. The space between those tees looks just like a rocket, which reflects the “rocket” part of the name obviously.

35) Hole

Very simple one. The “O” letter out of the word “hole” is… in the hole :).

36) Optical Strength

A bodybuilder raising a barbell. Only the barbell is not really a barbell, but eyeglasses, which stand for the “optical”.

37) Evolution X

Great one here, my favourite from this collection. The name is “Evolution X”, and in the logo we can literally see the “X” evolving from a one short line, to a fully shaped “X”.

38) BarCode

The beer mug stands for the “bar” part, and it has a barcode pattern on it. Doesn’t get any more obvious than that, does it.

39) Water Empire

When you hear “empire”, you hear “king”. And when you hear “king”, you think of a crown. The crown here is made of water, and so it stands for the name: Water Empire.

40) Lost

Another one playing with associations. When someone’s lost, you need something to find them, best if it’s something unique that will point to that person, and that person only. What’s more unique than a finger print?

41) Devil’s Music

You hear “music”, and you immediately think of notes and clefs. The logo here is a clef, with horns on the top. You hear “devil”, and think of horns of course. Plus, the clef is red, which is also commonly associated with devil.

42) SoundDog

Very similar. A dog, only with music notes instead of legs; a Sound-Dog.

43) Wiesinger Music Piano Service

This logo utilizes negative space. Letters “W” and “M” are the first letters of words “Wiesinger” and “Music” from the name. Those two letters form piano keyes, which obviously reflects the “piano service” part.

44) VinoPiano Elegant Taste

Similar like the one above, only little different. The logo consists from three wine bottles, they reflect the “vino” part. The white space between them with bottles form a piano keys, which stands for the “piano” part.

45) Long Neck Music

Funny one :). What’s music? Notes! And so here the logo is a note, only the note ends with… a giraffe’s head. Plus, both giraffe and the note share the “neck” part. Long Neck Music.

46) Pelican

Another negative space usage. Here, both “P” letter and the space inside it, which looks just like pelican, stand for the name – Pelican.

47) Pilot CMS

A word “pilot”, with cut out airplane-shaped part. Crystal clear :).

48) Shocked Film Group

Another funny logo. The “O” out of the “shocked” word looks just like the emoticon we all know – two eyes and widely open mouth. Shocked, jaw-dropped, if you will.

49) Shutterbug

The logo is a ladybug, only she has a shutter-shaped buckler. So there you go, nicely reflected “shutter” and “bug” words.

50) Water Drop

Negative space again. The “W” stands for “water”, and the space between the low part of W’s legs is actually a water drop -> W-drop -> Water Drop.

That’s all folks!

I hope you had fun looking at this collection and figuring out what each logo is trying to tell you :). I sure did!

This is my third tutorial on the Google Maps API v3. I'm going to show you how to use some other google maps features by building an interactive travel map. Everyone will be able to add new locations on the map and view the locations added by others. We will also be using MySQL databases to store the values of different locations so let’s get started.

What google maps features you'll learn?

• Adding a map to your site
• Adding controls for the map and settings the options for the controls
• Responding to events
• Adding markers, settings options for markers and dynamically changing marker settings
• Geocoding a location
• Creating tabbed infowindows (using jquery, jquery ui and some sample code from google code)

Prerequisites

The application is built using html, php and javascript and also saves the locations in a mysql database. It would be best if you had some basic knowledge of these.

What are we going to build?

We're going to build an interactive travel map. Everyone will be able to see the locations on the map and also add new ones easily. We'll save some info about each location (coordinates, address, a description, a photo and data about the person who added the location). Users will be able to add locations by clicking on the map to find out the coordinates and address and by filling in the rest of the info. The users will also be able to view all the locations from the database. For viewing them easier, we'll add a location list the user can browse and we will highlight a location on the map when the user goes with the mouse pointer over the location name.

You can view the app here! And also download the source code from here.

Creating the database table

First we have to create a table in our database to save the data about the locations on the map. We'll save the following data about each location:

• A name
• A description
• A photo
• Coordinates: latitude and longitude
• Address
• Info about the user who added the location: name and location

Here's how the code for creating the table looks like:

CREATE TABLE IF NOT EXISTS `locations` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` text NOT NULL, `description` text NOT NULL, `photo` text NOT NULL, `latitude` double NOT NULL, `longitude` double NOT NULL, `address` text NOT NULL, `user_name` text NOT NULL, `user_location` text NOT NULL, PRIMARY KEY (`id`));

Creating the layout for our app

We'll use a simple layout. We'll show a title and some info about our app at the top of the page. Below that we'll add three columns, one for adding locations (with a form for adding new locations), one for the map (a div called ‘map_canvas’) and one for the locations list.

Since the code is pretty long I’ve decided not to post it here, but you can see it in the source code of the app.

Connecting to the database and getting the info about the locations

To get the data from the database we'll first have to connect to it. We'll create a small php script for this and save it in the ‘connect.php’ file. The script looks like this:

$server = "WRITE_SERVER_NAME_HERE"; $username = "WRITE_USERNAME_HERE"; $password = "WRITE_PASSWORD_HERE"; $database = "WRITE_DATABASE_NAME_HERE"; $connId = mysql_connect($server,$username,$password) or die("Cannot connect to server"); $selectDb = mysql_select_db($database,$connId) or die("Cannot connect to database");

Don't forget to fill in your data!

We'll include this script in our main file and the database connection is done! We'll add the following lines at the beginning of our main file:

<?php include "connect.php"; ?>

Now we need to find out the number of locations and the information about all the locations in the database.

Here's how:

 $locations = mysql_query("select * from locations"); $nr_locations = mysql_num_rows($locations); 

We have done a simple query to the database and retrieved the info about the locations in the $locations variable. We have also found out the total number of saved locations. We will print this in the text we’ll show on top of our page:

Click on the map to add a new location! Total locations added: <?php echo $nr_locations;?>

We also have to print the location list, like this:

<?php // find locations from db // save data for locations $lats = "";          // string with latitude values $lngs = "";          // string with longitude values $addresses = "";     // string with address values $names = "";         // string with names $descrs = "";        // string with descriptions $photos = "";        // string with photo names $user_names = "";    // string with user names $user_locs = "";     // string with user locations $i=0; // take the locations from the db one by one while ($locat = mysql_fetch_array($locations)) {   // add location data to info strings   $lats .= $locat['latitude'].";;";   $lngs .= $locat['longitude'].";;";   $addresses .= $locat['address'].";;";   $names .= $locat['name'].";;";   $descrs .= $locat['description'].";;";   $photos .= $locat['photo'].";;";   $user_names .= $locat['user_name'].";;";   $user_locs .= $locat['user_location'].";;";   // show the location name in the right of the map with link that calls the highlightMarker function ?> <a onmouseover="highlightMarker(<?php echo $i;?>)"><?php echo $locat['name'];?></a> <br/> <?php   $i++; } // hidden inputs for saving the info for all the locations in the db ?> <input type="hidden" value="<?php echo $lats;?>" id="lats" name="lats"/> <input type="hidden" value="<?php echo $lngs;?>" id="lngs" name="lngs"/> <input type="hidden" value="<?php echo $addresses;?>" id="addresses" name="addresses"/> <input type="hidden" value="<?php echo $names;?>" id="names" name="names"/> <input type="hidden" value="<?php echo $descrs;?>" id="descrs" name="descrs"/> <input type="hidden" value="<?php echo $photos;?>" id="photos" name="photos"/> <input type="hidden" value="<?php echo $user_names;?>" id="user_names" name="user_names"/> <input type="hidden" value="<?php echo $user_locs;?>" id="user_locs" name="user_locs"/>

We have shown the location names as links. When the user goes with the mouse over the links, the highlightMarker JavaScript function is called. We'll take a look at it a bit later.

We have also saved the information about the locations in hidden input fields. We will use the info from the hidden fields to show the locations on the map.

Showing the map

To add the map we will first have to include the google maps api, like so:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Now, we'll define a javascript function called initialize to show the map in the div created for it. We will call this function after the page is loaded.

Here's how to call the function when the page loads:

<body onload="initialize();">

And here's the function code:

<script> var geocoder; var map; // initializing the map function initialize() {   // define map center   var latlng = new google.maps.LatLng(57.279043,29.355469);   // define map options   var myOptions =   {     zoom: 3,     center: latlng,     mapTypeId: google.maps.MapTypeId.HYBRID,     scaleControl: true,     navigationControl: true,     navigationControlOptions: {       style: google.maps.NavigationControlStyle.SMALL     },     mapTypeControl: true,     mapTypeControlOptions: {       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU     }   };   // initialize map   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   // add event listener for when a user clicks on the map   google.maps.event.addListener(map, 'click', function(event) {     findAddress(event.latLng);   }); } </script>

To create a map, we first have to define the options for showing the map. We have set the zoom level, the center of the map. Next, we have set the controls to show on the map: scale control, navigation and map type and we have defined some options for it. We have chosen to show a small navigation control and to show the map type control as a drop down menu. You can view all the options available for controls in the API reference.

Then, we initialize the map object and add an event for when the user clicks on the map. When this event is fired, the findAddress function will be called. The function takes as an argument the coordinates of the point where the user clicked on the map.

// finds the address for the given location function findAddress(loc) {   geocoder = new google.maps.Geocoder();   if (geocoder)   {   geocoder.geocode({'latLng': loc}, function(results, status)   {     if (status == google.maps.GeocoderStatus.OK)     {       if (results[0])       {         address = results[0].formatted_address;         // fill in the results in the form         document.getElementById('lat').value = loc.lat();         document.getElementById('long').value = loc.lng();         document.getElementById('address').value = address;       }   }   else   {     alert("Geocoder failed due to: " + status);   }   });   } }

This function uses the geocoding service from google maps to find the address corresponding to the coordinates where the user clicked on the map. When the function get the results from google, it shows the results in our form:

// fill in the results in the form document.getElementById('lat').value = loc.lat(); document.getElementById('long').value = loc.lng(); document.getElementById('address').value = address;

The user will just have to fill in the rest of the data to add a new location. I’ve not included here the php code to add the location to the database. You can see that in the source code!

Showing the markers

We will also have to show the locations on the map when it loads. We will call one more function when the page loads:

<body onload="initialize(); addMarkers()">

Let's see how the function looks like:

// initialize the array of markers var markers = new Array(); // the function that adds the markers to the map function addMarkers() {   // get the values for the markers from the hidden elements in the form   var lats = document.getElementById('lats').value;   var lngs = document.getElementById('lngs').value;   var addresses = document.getElementById('addresses').value;   var names = document.getElementById('names').value;   var descrs = document.getElementById('descrs').value;   var photos = document.getElementById('photos').value;   var user_names = document.getElementById('user_names').value;   var user_locs = document.getElementById('user_locs').value;   var las = lats.split(";;")   var lgs = lngs.split(";;")   var ads = addresses.split(";;")   var nms = names.split(";;")   var dss = descrs.split(";;")   var phs = photos.split(";;")   var usrn = user_names.split(";;")   var usrl = user_locs.split(";;")   // for every location, create a new marker and infowindow for it   for (i=0; i<las.length; i++)   {   if (las[i] != "")   {     // add marker     var loc = new google.maps.LatLng(las[i],lgs[i]);     var marker = new google.maps.Marker({       position: loc,       map: window.map,       title: nms[i]     });     markers[i] = marker;     var contentString = [       '<div>',       '<ul>',       '<li><a href="#tab-1"><span>photo</span></a></li>',       '<li><a href="#tab-2"><span>description</span></a></li>',       '<li><a href="#tab-3"><span>location</span></a></li>',       '</ul>',       '<div>',       '<p><h1>'+nms[i]+'</h1></p>',       '<p><img src="./photos/'+phs[i]+'"/></p>'+       '</div>',       '<div>',       '<p><h1>'+nms[i]+'</h1></p>',       '<p>Added by: '+usrn[i]+' from '+usrl[i]+'</p>'+       '<p>'+dss[i]+'</p>'+       '</div>',       '<div>',       '<p><h1>'+nms[i]+'</h1></p>',       '<p>Address: '+ads[i]+'</p>'+       '<p>Location: '+loc+'</p>'+       '</div>',       '</div>'       ].join('');     var infowindow = new google.maps.InfoWindow;     bindInfoWindow(marker, window.map, infowindow, contentString);   }   } } // make conection between infowindow and marker (the infowindow shows up when the user goes with the mouse over the marker) function bindInfoWindow(marker, map, infoWindow, contentString) {   google.maps.event.addListener(marker, 'mouseover', function() {     map.setCenter(marker.getPosition());     infoWindow.setContent(contentString);     infoWindow.open(map, marker);     $("#tabs").tabs();   }); }

We will also save the markers in an array.

We will take the information about the locations from the hidden input fields we have created earlier. We will create a new marker for each of the locations. The title of the marker will be the location name. We'll also create some infowindows to show when the user goes with the mouse over the markers. As you can see, we have used another function to bind each marker to its infowindow. We've also centered the map on the marker when the user goes with the mouse over it.

To show the information about the markers in the infowindow nicely, I have decided to use some sample code I found here. It uses jquery and jqueryui. We will also have to include these for the script to work:

<script src="jquery-1.4.2.min.js"></script> <script src="jquery-ui-1.8rc3.custom.min.js"></script> <link href="jquery-ui-1.8rc3.custom.css" rel="stylesheet" />

And we're almost done!

All there's left to do now is the highlightMarker function, the one called when the users goes with the mouse pointer over a location name in the location list. Let's take a look at the function:

// highlighting a marker // make the marker show on top of the others // change the selected markers icon function highlightMarker(index) {   // change zindex and icon   for (i=0; i<markers.length; i++)   {     if (i == index)     {       markers[i].setZIndex(10);       markers[i].setIcon('http://www.google.com/mapfiles/arrow.png');     }     else     {       markers[i].setZIndex(2);       markers[i].setIcon('http://www.google.com/mapfiles/marker.png');     }   } }

The function takes as an argument the index of the marker in the markers array we have created.  The highlightMarker function will make the selected marker show up on top of the other markers and change its icon. To make the marker on top of the others, we have to change the zIndex value of the marker.  The marker with the biggest value will show on top. We have set the selected markers value to 10 and the values of the rest of them to 2 (using the setZIndex function). We have also changed the icon of the marker with the setIcon function.

You might have noticed I also added a small javascript function to check if the user filled in all the information from the add form. The function is called when the form is submitted. It just checks the values filled in the form and if one of them is missing, it will show and error message and prevent the form from submitting.

And that's it! We now have an interactive travel map!