Great idea. Is there anything special I need to do or do I just edit that code you posted to reflect the path and name of my script, edit the template and place the script code in my template, put the code in the javascript file, then upload it? I tried it, but it didn't display anything at all. Here's what I did, and I know the paths are correct. My guess is the content in the map.js file has to be formatted differently? or can I just put it in there as it is?
My Template:
Code:
$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<title>$vboptions[bbtitle]</title>
$headinclude
</head>
<body>
$header
$navbar
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">NorthwestFirearms.com Firearm-Related Resource Map</td>
</tr>
<tr>
<td class="alt1">
<script type="text/javascript" src="scripts/map.js"></script>
</td>
</tr>
</table>
$footer
</body>
</html>
Here's what I put in the map.js, obviously with all the points which I edited out here to save space:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>NWFA Resource Map</title>
<meta name="title" content="MapBuilder - GoogleMap API Source Code Generator." />
<meta name="description" content="MapBuilder.net lets you tag locations on a map and publish it on your own site. Mapping is now easier than ever. It's free." />
<meta name="keywords" content="Google Maps API, PHP, AJAX, XML" />
<meta name="author" content="Andrew Bidochko. http://www.mapbuilder.net" />
<style type="text/css">
/* Generic map, side bar holder styles */
.MapBuilder {font: normal small verdana, arial, helvetica, sans-serif; font-size: 10pt; margin: 0px;}
.MapBuilder a {text-decoration: none; color: #0066CC; background-color: transparent;}
.MapBuilder a:hover {color: #F60; background-color: transparent;}
.MapBuilder h1 {font-weight: bold; font-size: 16pt; color: #369; border-bottom: 2px solid #369;}
/* Info Window styles */
.IW { width: 350px;}
.IWContent {height: 120px; overflow:auto;}
.IWCaption {font-weight: bold; font-size: 12pt; color: #369; border-bottom: 2px solid #369;}
.IWFooter {margin-top: 5px; font-size: 8pt; }
.IWFooterZoom {}
.IWDirections{background-color:#FFF;}
.MapBuilderSideBar {float:left; margin-left: 10px; }
/* PDMarker */
div.markerTooltip {
color: black;
background-color: white;
white-space: nowrap;
margin: 0;
padding: 2px 4px;
border: 1px solid black;
}
</style>
<!-- Please, request sign up for your own GMAP KEY at http://www.google.com/apis/maps/signup.html and replace 'GMAPKEY' entry with generated key in the line below. -->
<script src="http://maps.google.com/maps?file=api&v=2&key=YOURGMAPKEY" type="text/javascript"></script>
<script src="http://www.mapbuilder.net/js/api/google/v2.03/?UserName=joeylink&Map=68322&SideBar=Right" type="text/javascript"></script>
<script type="text/javascript" src="http://www.mapbuilder.net/libs/pdmarker/pdmarker1.99e_custom.js"></script>
<script type="text/javascript">
//<![CDATA[
// Global Variables
// set map variable
var map = null;
//set up array of locations
var aLocations = new Array;
/*************************** Configuration Options ***************************/
/*PDMarker is used to display tooltips when the user hovers over the markers.
* PDMarker is a LGPL library provided by Peter Jones.
* For details see http://wwww.pixeldevelopment.com/pdmarker.asp
*/
var usePDMarker = true;
// Create a base "tiny" red icon that specifies the shadow, icon dimensions, etc.
var iconsm = new GIcon();
iconsm.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
iconsm.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
iconsm.iconSize = new GSize(12, 20);
iconsm.shadowSize = new GSize(20, 18);
iconsm.iconAnchor = new GPoint(6, 20);
iconsm.infoWindowAnchor = new GPoint(5, 1);
// Create a base "large" red icon that specifies the shadow, icon dimensions, etc.
var iconbig = new GIcon();
iconbig.image = "http://www.google.com/mapfiles/marker.png";
iconbig.shadow = "http://www.google.com/mapfiles/shadow50.png";
iconbig.iconSize = new GSize(20, 34);
iconbig.shadowSize = new GSize(37, 34);
iconbig.iconAnchor = new GPoint(6, 34);
iconbig.infoWindowAnchor = new GPoint(5, 1);
// Custom Icon
var iconcustom = new GIcon(iconbig);
iconcustom.shadow = '';
function onLoad() {
if (!GBrowserIsCompatible())
{
document.getElementById("MapBuilderMap").innerHTML = "Unfortunately your browser doesn't support Google Maps.<br /> To check browser compatibility visit the following <a href=\"http://local.google.com/support/bin/answer.py?answer=16532&topic=1499\">link</a>.";
return;
}
map = new GMap2(document.getElementById("MapBuilderMap"));
var MB = new MapBuilder(map);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// Center the map to the default location and set map type
map.setCenter(new GLatLng(45.506346901083425, -121.17919921875), 6, map.getMapTypes()[0]);
// Initialize variables
var point = null;
var footerHtml = null;
var InfoHTML = null;
var marker = null;
/* Options used for PDMarker initialization:
* label: tooltip text
* opasity: tooltip opasity
*/
var options = {};
// Add locations
point = new GLatLng(45.421231, -122.633026);
footerHtml = "<div class=\"IWFooter\"><div class=\"IWFooterZoom\"><a href=\"javascript:void(0)\" onclick=\"ZoomMapTo(0)\">Zoom To</a></div></div>";
// Define Marker
options = {opasity: 100, label:'99 Gun\'s & Loan'};
InfoHTML = "<div class=\"IW\"><div class=\"IWCaption\">99 Gun's & Loan</div><div class=\"IWContent\"><div id=\"post_message_178\">14110 SE Mcloughlin Blvd # 3<br>Milwaukie, OR 97267<br>(503) 353-0783<br><a target=\"_self\" href=\"http://www.northwestfirearms.com/forum/showthread.php?t=61\"><br>Click here to review this business</a><br><a href=\"http://www.99guns.com/\" target=\"_blank\"><br></a></div></div>" + footerHtml + "</div>";
iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_blue.png";
marker = createMarker(point, InfoHTML, iconbig, options, 0);
map.addOverlay(marker);
aLocations[0] = new Array(marker, "99 Gun's & Loan", InfoHTML, point);
point = new GLatLng(47.81831, -122.313195);
footerHtml = "<div class=\"IWFooter\"><div class=\"IWFooterZoom\"><a href=\"javascript:void(0)\" onclick=\"ZoomMapTo(1)\">Zoom To</a></div></div>";
// Define Marker
options = {opasity: 100, label:'AR Pawn'};
InfoHTML = "<div class=\"IW\"><div class=\"IWCaption\">AR Pawn</div><div class=\"IWContent\"><div id=\"post_message_187\">8506 SE Foster Rd<br>Portland, OR 97266<br><br><a href=\"http://www.arpawn.com/\" target=\"_blank\">http://www.arpawn.com</a><br><br><a target=\"_self\" href=\"http://www.northwestfirearms.com/forum/showthread.php?t=66\">Click here to review this business</a><br></div></div>" + footerHtml + "</div>";
iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_blue.png";
marker = createMarker(point, InfoHTML, iconbig, options, 8);
map.addOverlay(marker);
aLocations[8] = new Array(marker, "AR Pawn", InfoHTML, point);
point = new GLatLng(42.187966, -122.646299);
footerHtml = "<div class=\"IWFooter\"><div class=\"IWFooterZoom\"><a href=\"javascript:void(0)\" onclick=\"ZoomMapTo(9)\">Zoom To</a></div></div>";
// Define Marker
options = {opasity: 100, label:'Ashland Gun Club'};
InfoHTML = "<div class=\"IW\"><div class=\"IWCaption\">Ashland Gun Club</div><div class=\"IWContent\">Emigrant Creek Rd.<br>Ashland, OR 97520<br>(541) 482-0641<br><br><a href=\"http://ashlandgunclub.net/\" target=\"_blank\">http://ashlandgunclub.net</a><br><br><a target=\"_self\" href=\"http://www.northwestfirearms.com/forum/showthread.php?t=211\">Click here to review this range</a><br></div>" + footerHtml + "</div>";
iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_red.png";
marker = createMarker(point, InfoHTML, iconbig, options, 9);
map.addOverlay(marker);
aLocations[9] = new Array(marker, "Ashland Gun Club", InfoHTML, point);
point = new GLatLng(47.695596, -117.411402);
footerHtml = "<div class=\"IWFooter\"><div class=\"IWFooterZoom\"><a href=\"javascript:void(0)\" onclick=\"ZoomMapTo(10)\">Zoom To</a></div></div>";
// Define Marker
options = {opasity: 100, label:'Yamhill County Sportsmen\'s Association'};
InfoHTML = "<div class=\"IW\"><div class=\"IWCaption\">Yamhill County Sportsmen's Association</div><div class=\"IWContent\">PO Box 1265<br>McMinnville, OR 97128<br>(503) 434-9751<br><br><a target=\"_self\" href=\"http://www.northwestfirearms.com/forum/showthread.php?t=239\">Click here to review this range</a><br></div>" + footerHtml + "</div>";
iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_red.png";
marker = createMarker(point, InfoHTML, iconbig, options, 192);
map.addOverlay(marker);
aLocations[192] = new Array(marker, "Yamhill County Sportsmen's Association", InfoHTML, point);
// And finnaly create sidebar
createSideBar();
}
//]]>
</script>
</head>
<body onload="onLoad()" onunload="GUnload();">
<div id="MapBuilder" class="MapBuilder">
<h1>NWFA Resource Map</h1>
<p>NorthwestFirearms.com Firearm-Related Resource Map</p>
<div id="MapHolder" class="MapHolder" style="float:left;">
<div id="MapBuilderMap" style="width: 1024px; height: 768px;"></div>
<!-- Please KEEP RESPECT to MapBuilder.net team and DO NOT DELETE line below if you want to keep MapBuilder service free. -->
Created by <a href="http://www.MapBuilder.net">MapBuilder.net</a>.
</div>
<div id="MapBuilderSideBar" class="MapBuilderSideBar">
<div id="SideBarAction">Map Locations [<a id="SideBarActionLink" href="javascript:void(0)" onclick="ProcessLocationList()">-</a>]</div>
<div id="LocationList" style="height: 748px; overflow:auto;"></div>
</div>
</div>
</body>
</html>
More Information