***Install: Add a module as you normally would, and copy the below into the template content.
To create a module
vBa CMPS > add module > template > then give it any title you want and display order
Then give it a name I called my "googlemaps" so the name is now "adv_portal_googlemaps"
******** note google maps do slow down load times *********
Copy the below and place it into the template content.
After you have your Google API Map Key enter it where it says "Enter_Your_Key_Here " Should be around line 7 or so.
PHP 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>Bar & Club Map Directory</TITLE>
<SCRIPT SRC="http://maps.google.com/maps?file=api&v=1&key=Enter_Your_Key_Here" TYPE="text/javascript"></SCRIPT>
<SCRIPT TYPE="text/javascript">
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"));
// to change to map, satallite, hybird. change the "2" in the below low to either 0 for map, 1 for satallite, or 2 for hybrid
map.setMapType(map.getMapTypes()[2]);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// change the coordinates listed below to have a default zoom - the 9 is the zoom in, zoom out feature.
map.centerAndZoom(new GPoint( -74.3, 40.15), 9);
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() {
// to add new locations copy the very next line and change the 0 in newpoints[0] to a 1 and so on for each new point added.
newpoints[0] = new Array(-74.084375, 40.917748, icon0, 'Austins Restaurant/ Junkyard Nightclub', '<div id="popup">Austins Restaurant/ Junkyard Nightclub<br />352 West Passaic Street<br />Rochelle Park, NJ 07662</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:#FFFFFF;
border:0px solid #FFFFFF;
margin:0px;
padding:2px;
width:270px;
color: #000000;
}
</STYLE>
</HEAD>
<BODY>
// i have this set up for height only add the width if you want.
<DIV id="map" STYLE="height:600px"></DIV>
</BODY>
</HTML>
If you want to add different color markers, line 10 should read:
PHP Code:
var icon0;
Under that add
PHP Code:
var icon1;
Change the number for each different marker you want. So the more different marks you want youll have to add that line and change the number as well as the coded below.
Then after you have added that you will need to add this: This will have to be added for each marker you add.
Add this right below the first marker. Should be around line 46 or so.
PHP Code:
icon1 = new GIcon();
icon1.image = "large_yellow_marker.png";
icon1.shadow = "large_yellow_marker_shadow.png";
icon1.iconSize = new GSize(20, 34);
icon1.shadowSize = new GSize(37, 37);
icon1.iconAnchor = new GPoint(9, 34);
icon1.infoWindowAnchor = new GPoint(18, 25);
Now see where it says "large_yellow_marker.png" and "large_yellow_marker_shadow.png" You will need to input your own markers there, full url if needed.
Each time you want to use a different marker you have to call to that variable/marker. So in the example I have:
PHP Code:
newpoints[0] = new Array(-74.084375, 40.917748, icon0, 'Austins Restaurant/ Junkyard Nightclub', '<div id="popup">Austins Restaurant/ Junkyard Nightclub<br />352 West Passaic Street<br />Rochelle Park, NJ 07662</div>');
You would chang the icon0 to icon1 so it would read like this.
PHP Code:
newpoints[0] = new Array(-74.084375, 40.917748, icon1, 'Austins Restaurant/ Junkyard Nightclub', '<div id="popup">Austins Restaurant/ Junkyard Nightclub<br />352 West Passaic Street<br />Rochelle Park, NJ 07662</div>');
Adding Images to the pop up windows.
You can add image to the pop up windows as well. See picture attached.
In a call to variable where it says:
PHP Code:
newpoints[0] = new Array(-74.084375, 40.917748, icon1, 'Austins Restaurant/ Junkyard Nightclub', '<div id="popup">Austins Restaurant/ Junkyard Nightclub<br />352 West Passaic Street<br />Rochelle Park, NJ 07662</div>');
Right after
PHP Code:
'<div id="popup">
and before
PHP Code:
</div>');[/
You can edit that as if you were doing a regular html page.
Then whatever you called your page in the immediate above directions from vbA under "page identified" ( i used googlemap ) edit your navbar and inclue
to a link to that page.
Mine is
PHP Code:
/forums/index.php?page=googlemap
replace googlemap with whatever you called your page under page identifier.
*** added screen shots ***
First shows the installed look.
Second picture shows the popup window when a marker is clicked
Third shows the addiontal useage of colored markers. Code is listed above but not in the orginal install.
Fourth Picture shows the popup window with added images. How to is listed above but not in the orginal install.
Show Your Support
This modification may not be copied, reproduced or published elsewhere without author's permission.
Google Maps - Hot Spots - Events for vbaCMPS Details »»
About Developer
Template Edits 
No support by the author.
