Wednesday 26 January 2011

How to add a Google map to your photography site

I recently (well not that recently, but I'm just catching up with a lot of things), received an email asking how I had got Google Maps on my websites. The maps I am talking about are like this one on Images Of Essex and this at Images of Suffolk.


Step 1 - Create the Galleries

The first thing you need to do is to actually create the galleries you will be linking your map to.
Fortunately both websites are Foliopic sites.  Foliopic have a great system where you can keyword your images and search for the image, the URL for this search can then be used as a gallery.

For example keywording all our images and issuing a search for Orford gives this search: http://www.imagesofsuffolk.com/search/gallery/orford which can be used as an Orford gallery.
Other hosting sites may have a similar system, or you will just have to create galleries for each area


Step 2 - Create The Map

I used  http://mapmaker.donkeymagic.co.uk/ to automatically generate the API code for me.  It is worth registering with the site as this allows you to save maps and you will be coming back to this time & time again as you add new points to the map.

To add galleries, pick a point on the map then give it a name so you can change it later if you need to.

In the code box paste in something like:

<b><a href="http://www.imagesofsuffolk.com/search/gallery/orford"><b>Orford </b>Gallery</a></b>


and change
http://www.imagesofsuffolk.com/search/gallery/orford

to the url for your gallery and Orford to the name of the gallery

Repeat the above process for each gallery then save the map.



Step 3 Get your own api key:

To use Google maps you need to have your own API key.  This is simple enough, go to http://www.google.com/apis/maps/signup.html to sign up and then copy the key.

In Mapmaker click the Get Javascript button then paste your Google Api key in here

<!-- //Change the following line to use your own key available from http://www.google.com/apis/maps/signup.html -->


<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAARKYMX3qABRwgBGTOLfvdgBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTmhS_LQj6knfNR9GOtLZ_JFxncNQ" type="text/javascript"></script>


Now you can copy all the javascript ready to paste it onto your site.


Step 4 Create a new page

These instructions are specific to Foliopic
Create a new page and click on the source button so you can see the HTML that makes up the page.
Delete all the HTML that is there currently and paste in the HTML from mapmaker.

Remove this block from the top:


<div style="background-color: #fff2cc;">
&amp;title&gt;Simple Google map&lt;/title&gt;


And this from the bottom


<style type="text/css">
div#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}

</style>
</head>
<body>
<div id="map" style="width:600px;height:450px"></div>
</body>
</html>



Step 5 - Styling your map:

Add the following to your css file.


/************** MAP *******************/
#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}

#popup a
{
color:black;
}

#popup a:hover
{
color:black;
}

Monday 24 January 2011

Any Bristol / Bath Photographers out there?

The Welshot Imaging Photographic Academy seem to be going from strength to strength and are now expanding into the Bristol Area from their heartland in Welsh Wales.

The sheer energy and drive that Welshot put into everything they do is bound to make this new venture a success. If you are in the area it will be well worth your time to check them out.

And now for the slick promo video:

Sunday 16 January 2011

2010 Portfolio Updated

It's not been a great winter for me so far, when the weather has been great for photography I have been unwell and when I have been well the light has been as flat as a pancake.  So instead its time to get round to doing all those admin jobs that are real easy to put off when something more interesting comes up like keywording, cataloguing and updating my web galleries.

The 2010 Gallery includes images from across England and I hope you find something there you enjoy looking at.

Coniston Sunset

Sunday 9 January 2011

Images of Essex Exhibition Timelapse Video

Dave Peck cunningly shot a time-lapse video of us all hanging our latest exhibition at Loughton Library.  The video was shot on a Canon 7D which was taking one shot every 5 seconds.

Saturday 8 January 2011

Images of Essex Exhibition opens in Loughton

Mist in the Woods


The Images of Essex teams latest exhibition opens today at Loughton Library.  Imaginatively called "Images of Essex" it features work from across the county by Dave Peck, Kevin Goodchild and myself. The exhibition runs until the 4th of February and even if I say so myself it is well worth a visit:

Images of Essex - an exhibition by www.ImagesOfEssex.co.uk
Traps Hill
Loughton
Essex IG10 1HD

Telephone: 020 8502 0181

Opening Times:
Monday: 9.00 - 7.00
Tuesday: 9.00 - 7.00
Wednesday: 9.00 - 7.00
Thursday: 9.00 - 7.00
Friday: 9.00 - 7.00
Saturday: 9.30 - 5.30
Sunday: 11.00 - 3.00

If you are in the area please pop in for a view and why not post your reaction here.