Adding Google Maps to your Listings

 

Did you ever want to add a map to your listing?  Sure it doesn’t always matter, but what about when it does?  Take for instance, our home town of Orlando.  If you live on the East Side as I do, your center point is the University of Central Florida and seldom do you need to leave this side of town to do much of anything.  Yet if you want to go to Walt Disney World, it can be a 30-45 minute drive.  Now that isn’t a bad deal if the destination is Disney, but what about if it is just Dinner.

What if your auction services an entire state?  Oh sure Rhode Island, you are still set, but what about places like Maine, Michigan, or Texas?  I think you see my point.  It sometimes is more important to show a map to your bidders than just a city / state combination.

 

How do I get the map in the description?

 

You can use multiple services, but personally, I am a big fan of Google.  So let’s take a look at the code involved in creating the map above.  The map that I am illustrating is to Atlantis Resort in the Bahamas.

 

<img src="http://maps.google.com/maps/api/staticmap?center=Nassau,
The+Bahamas&zoom=5&size=400x300&markers=color:0xff9900%7Clabel:
X%7CAtlantis+Paradise+Island,Nassau,The+Bahamas&sensor=false" alt="" />

 

Let's break it down into its key parts

 

  • <img src – This is standard HTML to reference an image
  • http://maps.google.om/maps/api/staticmap? – This just tells us where to look for the completed image.  The rest is the fun part.
  • center=Nassau,The+Bahamas – This can be an address, a landmark or a City/State combination.  You must substitute the “+” sign for spaces.
  • zoom=5 – Zoom tells the map what range to show on the map.  The zoom ranges from 0 (zoomed out) to 18 (zoomed in).  The map above is at level 5 and a common street map is 10, but play with it until you find your desired detail.
  • size=400×300 – This is the most explanatory.  The map in our example is 400 pixels wide by 300 pixels tall.  You have complete control of it.
  • markers=color:0xff9900%7Clabel:X%7C – Here is how we stylize the marker that shows up.  The color of the marker is orange with a hexidecimal code of FF9900.  The one-letter label that shows is the letter “X”.
  • Atlantis+Paradise+Island,Nassau,The+Bahamas – We are now defining the location of the sensor.  Since Atlantis Paradise Island is a landmark in Nassau, we don’t need the physical address, but it could be substituted.  Remember to use the “+” symbol for spaces.
  • sensor=false – If you were designing this map for a mobile phone, you could make the sensor = “true” which would pull your current GPS position from your phone’s GPS sensor and plot a course from your current location to the location in question.  Since we are loading this into a web site, we will make that sensor = “false”

And there you have it.  You now can add Google Mapping to your listing and add more content for your users.

Leave a Reply

Your email address will not be published. Required fields are marked *