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 FoliopicCreate 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;">
&title>Simple Google map</title>
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;
}
No comments:
Post a Comment