Putting Your Website on the Map

If you want to make sure your visitors never lose touch of reality and their own surroundings while exploring the infinite virtual world that is your website, Google Maps is there to save the day once again by enhancing your website with a helpful point of reference. This week, I learned how to integrate my BDF (Best Digital Friend) into my website to help all my visitors navigate through the twists and turns of our beloved Steel City, Pittsburgh. How did I do this? Allow me to map it out for you.

Before beginning your digital journey, you will need to acquire the free API key from Google. What’s API, you ask? It’s an acronym that stands for Application Programming Interface, and it’s basically how your software connects with your code, so its output can be visible on your website.

You can get an API key by going to this website: https://code.google.com/apis/console/. After opening the link, click “Create Project” and look for the tag labeled Google Maps API v3. Be sure to switch this feature on by clicking on the “Off” tab. When the screen pops up, click “I Agree” and then “Accept.” This will authorize the switch to turn on. Following this, click the “API Access” tab and “Create an OAuth 2.0 Client ID.” Type in your product name, your web address and the “Create Client ID” button. This will supply you with your API key, which will probably look something like this:


Enter this key into your code underneath your header. The end result of your coding will look something like this:

<!DOCTYPE html>
<script type=”text/javascript”

<script type=”text/javascript”>
function initialize()
var mapProp = {
center:new google.maps.LatLng(40.43946776063004, -79.95879650115967),
var map=new google.maps.Map(document.getElementById(“googleMap”)

google.maps.event.addDomListener(window, ‘load’, initialize);

Although this will go at the top of your code, you’ll want to make sure to include the following coding at the bottom:

<hr />
<div id=”googleMap” style=”width:700px;height:532px;”></div>
<hr />

You can even customize your location for your map by entering the latitude and longitude of the area you want to show. This can be anywhere from Brazil to Nigeria to right here at Pitt. Once you’ve customized your surroundings, you can alter your map according to your preferences for size depending on how close to the real world you want your visitors to be.

And there you have it: a fully interactive map and a little piece of the world right within your own website. Bon Voyage!

– Natalie Russell

~ by Madame Psychosis on September 10, 2012.

2 Responses to “Putting Your Website on the Map”

  1. Very nice, upbeat post. You keep the reader interested from start to finish by using engaging language, like when you say, “This week, I learned how to integrate my BDF (Best Digital Friend) into my website to help all my visitors navigate through the twists and turns of our beloved Steel City, Pittsburgh.” So this is one of the major pluses I noticed in your post.

    Another couple of things that worked for me were your voice and use of graphics. Your tone is conversational, but confident — I get the vibe that you know what you’re talking about, but you’re still engaging and friendly when describing it. And, of course, the graphics helped a ton because I could see your code as well as the finished product.

    As far as revising goes, maybe try to break up larger blocks of involved text when you’re explaining tricky stuff. In your third paragraph, I got kind of lost in all the fancy jargon.

    But anyway, good job! ^_^


  2. Nice, but I feel that the code needs some more explaining. It is scary to just copy and paste code without knowing what it does. Your website might blow up…

Comments are closed.

%d bloggers like this: