The Arcive of Official vBulletin Modifications Site.

twobob · #1 05-07-2006, 10:46 AM

I found a couple of web sites out there that allow you to create your own google maps with annotations, and they then generate the code for you in HTML:

http://www.donkeymagic.co.uk/googlemap/
http://www.mapbuilder.net/

You can then paste the HTML code into one of your pages, insert your Google Maps API key (which is free and is available from http://www.google.com/apis/maps/signup.html ), and hey presto!, there's your map code!

Here's the source code from one I created using donkeymagic:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Simple Google map</title> 
<!-- //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=1&key=GOOGLEMAPSAPIKEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Google Map Maker script v.1.1
// (c) 2006 Richard Stephenson http://www.donkeymagic.co.uk
// Email: donkeymagic@gmail.com
// Documentation available at http://www.donkeymagic.co.uk/googlemap/
var map;
var icon0;
var newpoints = new Array();
 
function addLoadEvent(func) { 
	var oldonload = window.onload; 
	if (typeof window.onload != 'function'){ 
		window.onload = func
	} else { 
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
 
addLoadEvent(loadMap);
addLoadEvent(addPoints);
 
function loadMap() {
	map = new GMap(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
 
	map.centerAndZoom(new GPoint( -0.07995128631591797, 51.50657887273498), 2);
 
	icon0 = new GIcon();
	icon0.image = "http://www.google.com/mapfiles/marker.png";
	icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
	icon0.iconSize = new GSize(20, 34);
	icon0.shadowSize = new GSize(37, 34);
	icon0.iconAnchor = new GPoint(9, 34);
	icon0.infoWindowAnchor = new GPoint(9, 2);
	icon0.infoShadowAnchor = new GPoint(18, 25);
}
 
function addPoints() {
 
	newpoints[0] = new Array(-0.07797718048095703, 51.50850206542486, icon0, 'First Stop - The Tower of London', '<div id="popup">This is your first stop on this walk.  You get can details about the Tower of London from http://www.toweroflondontour.com/</div>'); 
	newpoints[1] = new Array(-0.07527351379394531, 51.50577751848878, icon0, 'Second Stop - Tower Bridge', '<div id="popup">Half way across this bridge is the entrance to the Tower Bridge Exhibition.  Great view from the top!<br />http://www.towerbridge.org.uk/TowerBridge/English</div>'); 
	newpoints[2] = new Array(-0.07351398468017578, 51.503400084633526, icon0, '3rd Stop - Shad Thames', '<div id="popup">This area used to be where all the ships unloaded their supplies to be sold to the people of London.  The wharf's have been restorated and are now some of the trendiest cafes, restuarants and bars in town.  Definately worth a break for a beer here!</div>'); 
	newpoints[3] = new Array(-0.08244037628173828, 51.50409462869737, icon0, 'The London Dungeons!', '<div id="popup">The London Dungeons are one of the most popular tourist attractions in London.  Check it out, the kids will love it!  http://www.thedungeons.com/</div>'); 
 
	for(var i = 0; i < newpoints.length; i++) {
 
		var point = new GPoint(newpoints[i][0],newpoints[i][1]);
 
		//Add overlay to map 
		var popuphtml = newpoints[i][4] ;
		var marker = createMarker(point,newpoints[i][2],popuphtml);
		map.addOverlay(marker);
	}
}
 
function createMarker(point, icon, popuphtml) {
	var marker = new GMarker(point, icon);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(popuphtml);
	});
	return marker;
}
 
//]]>
</script>
 
<style>
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>

Try it yourself, but you'll need to replace GOOGLEMAPSKEY with your er, key!

I'm thinking that is pretty cool and am wondering if:

1) Is it possible to post this html code into a vb post? If so, how and what are the 'security' risks?
2) Could some sort of MOD be done whereby a member creates a map and generates the code which then automatically appears in a new post?

This would be really cool for forums where members want to share their favourite walks, or whatever (cafes, bars, historical churches, etc). In time there would be a whole bunch of great maps from around the world, which members could print off if they wanted to try out next time they were in the neighbourhood.

I reckon this MOD would be a mega hit!

Can 1) and 2) above be done?

Grateful for your thoughts about this. Thanks, twobob

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04615 seconds Memory Usage 2,260KB Queries Executed 12 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)post_thanks_box (1)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit_info (1)postbit (1)postbit_onlinestatus (1)postbit_wrapper (1)showthread_list (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_threadedmode.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids_threaded showthread_threaded_construct_link showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!