Maybe I'm no longer a complete novice! Can you believe I actually put a map on my Melbourne Advice blog last week? I chanced on a discussion group where people were spending pages describing the locations of Melbourne's University campuses and thought what they really needed was a good map. The problem was how to do it.
There's a google widget you can use to add a map to your webpage, but it wouldn't let me mark any of the campuses. I looked at the Google Maps API page & couldn't make any sense of it. In desperation I created a map on google's new mymap feature, and put a link on my blog. To be honest, I wasn't satisfied though, because the link isn't very obvious. In the end I found detailed instructions on Beta Blogger For Dummies. It took about ten hours to find the appropriate instructions, put the CSS and HTML code into my template, shift it around the blog page & sort out how to link to the map I'd created in mymap, which is where Google Page Creator came in.
I found out pretty early in this whole blogging experience that there are some things which Blogger just can't do. One of the more annoying things is that it can't host a file online. Google Page Creator appeared a few months ago and promptly disappeared into oblivion. Personally I couldn't really see the point of it. No pretty templates, no widgets, no nothing. But hidden in the link function is the ability to upload a file (say my map's data file) and host it online. I can call on the file from blogger, link to it. People can download it. I've called on a map file from within my blogger template to display the map using the new GGeoXml constructor. Building on the code from Beta Blogger For Dummies, I put the line
var geoXml = new GGeoXml("http://myaccount.googlepages.com/mymap.kml")
after the line
var map = new GMap2(document.getElementById("map")) and now the map I made in Google's mymap facility is now visible on my site!
Watch this space for more uses for Page Creator, but in the meantime, you can see from the map on melbournepricecheck.blogspot.com why there was so much confusion about campus locations.
Subscribe to:
Post Comments (Atom)
2 comments:
Just found out I've been caught out in a previous post http://notearningmoneyonline.blogspot.com/2007/01/please-put-my-links-back.html
because blog and code I originally quoted has now disappeared. In case the same thing happens to betabloggerfordummies.blogspot.com I've quoted the full code below:
To add a Google Map to your blog go to ..........
http://www.google.com/apis/maps/ and click on the Sign up for a Google Maps API key button. It will take you to this page :
http://www.google.com/apis/maps/signup.html. This key identifies your web site to Google and helps them track usage of Google Maps. A new and distinct key is needed for each directory on your website that includes Google Maps.
Put a check in the box where it says I have read and agree with the terms and conditions and paste your blog url in the text box below and click on Generate API Key button.
Copy paste this code (ONLY THE BLUE LINES) just below the title tag in your template :
<script src='http://maps.google.com/maps?file=api&v=2&key=YOUR KEY' type='text/javascript'>
IN THE ABOVE LINE ADD amp; AFTER BOTH THE & CHARACTERS OR YOU WILL GET ERROR MESSAGE.
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 5);
}
}
//]]>
</script>
Type in your Google API key code where it says 'YOUR KEY ' above.
Save Template. The addControl line adds a small pan and zoom control to the map. The next line centers and zooms the map to that latitude and longitude at zoom level 5.
Then paste this code inyour template just after <body> tag :
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
Save Template.
Paste this code in the css part of your template :
#map {
float:right;
margin:10px 20px 10px 10px;
}
Save Template
See how I have added it to my test site : http://googlemapdemo.blogspot.com/
My .KML map overlay disappeared a few days ago. After a bit of mucking around, I moved the var statements
var map
var geoXml = new GGeoXml("http://mypages.googlepages.com/CampusMap.kml");
before the function load () statement ...in the explanation above from betabloggerfordummies. Its working again (apparently).
Post a Comment