Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.5 > vBulletin 3.5 Template Modifications

Reply
 
Thread Tools
Google Maps - Hot Spots - Events for vbaCMPS Details »»
Google Maps - Hot Spots - Events for vbaCMPS
Version: 1.00, by KevNJ KevNJ is offline
Developer Last Online: Jun 2013 Show Printable Version Email this Page

Version: 3.5.1 Rating:
Released: 03-25-2006 Last Update: Never Installs: 11
Template Edits
Code Changes  
No support by the author.

This is my first contribute to everyone here so if you could click install so that i further add to this.


Here is a LIVE working demo.
minus the added pictures and colored markers which is an addiontal install. Insutructions listed below.

http://www.jerseyparties.com/index.php?page=googlemap

Im using this with vb 3.5.1 and vbadvanced cmps 2.1

Google Maps with Hot Spots - Events for CMPS

******** You will need your own Google API Map Key for this to work. You can get it by going here:http://www.google.com/apis/maps/signup.html

***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.340.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(2034);
    
icon0.shadowSize = new GSize(3734);
    
icon0.iconAnchor = new GPoint(934);
    
icon0.infoWindowAnchor = new GPoint(92);
    
icon0.infoShadowAnchor = new GPoint(1825);
}
 
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.08437540.917748icon0'Austins Restaurant/ Junkyard Nightclub''<div id="popup">Austins Restaurant/ Junkyard Nightclub<br />352 West Passaic Street<br />Rochelle Park, NJ 07662</div>'); 
    
    for(var 
0newpoints.lengthi++) {
 
        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(pointiconpopuphtml) {
    var 
marker = new GMarker(pointicon);
    
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
Convert an Address to Latitude & Longitude
Ive been using this site to convert an address to the proper latitude and longitude.
http://stevemorse.org/jcal/latlon.php - for US locations
http://www.geocoder.ca/ - for Canadian locations


Adding Different color markers.

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(2034);
    
icon1.shadowSize = new GSize(3737);
    
icon1.iconAnchor = new GPoint(934);
    
icon1.infoWindowAnchor = new GPoint(1825); 
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.08437540.917748icon0'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.08437540.917748icon1'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.08437540.917748icon1'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.

To add this to its own CMPS Page
Follow these directions and skip number 7, because I set this up as a template file and not a php file.
http://www.vbadvanced.com/membersare...tid=4&pageid=6

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.

Comments
  #42  
Old 04-20-2006, 05:55 PM
FROGGYJ FROGGYJ is offline
 
Join Date: Sep 2005
Posts: 153
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I would like to implement some form of googlemaps on my site which would be used to display locations of known radar traps that police setup, or photo radar locations etc....

living in Canada I'm having a difficult time getting the lat and long of locations. I thought I was playing around with googlemaps before and found a way to indicate the lat/long as you moved your cursor over the map. Just looking for some suggestions you might have?
Reply With Quote
  #43  
Old 04-23-2006, 03:45 AM
KevNJ KevNJ is offline
 
Join Date: Jan 2005
Posts: 310
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by FROGGYJ
I would like to implement some form of googlemaps on my site which would be used to display locations of known radar traps that police setup, or photo radar locations etc....

living in Canada I'm having a difficult time getting the lat and long of locations. I thought I was playing around with googlemaps before and found a way to indicate the lat/long as you moved your cursor over the map. Just looking for some suggestions you might have?
Youll have to find a site that offers lat & long for canada. I believe the one I listed above is only for US.

This should work for canda.
http://geocoder.ca/
Reply With Quote
  #44  
Old 04-23-2006, 04:07 PM
FROGGYJ FROGGYJ is offline
 
Join Date: Sep 2005
Posts: 153
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

How can you adjust the size of the map dynamically if possible? My site is based around 1024x768, but I personally use 1200x1600. How can I make the sizing the best for both worlds, or prefereable the 1024x768. Also are we able to get access anywhere to google map files? Perhaps images that google uses for markers etc....I've found some here and there, but just wondering if there is somewhere that indexes them?

I don't even see where to adjust the width of the map.
Reply With Quote
  #45  
Old 04-24-2006, 12:05 AM
KevNJ KevNJ is offline
 
Join Date: Jan 2005
Posts: 310
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey froggy - At the bottom of the coding it says:
"<BODY>
// i have this set up for height only add the width if you want.
<DIV id="map" STYLE="height:600px"></DIV>
</BODY> "

change the height to whatever you want and add the width.

Also Im not sure of where to get the markers. You can make your own and pull them from your server, just edit the
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png"; url for those.
Reply With Quote
  #46  
Old 05-13-2006, 09:18 PM
KevNJ KevNJ is offline
 
Join Date: Jan 2005
Posts: 310
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Updated the Live Demo Link.
Reply With Quote
  #47  
Old 08-11-2006, 08:05 PM
Eddie Raps Eddie Raps is offline
 
Join Date: Jul 2006
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

When I attempt to add a 4th marker the map doesnt load for some reason.. I copied and pasted everything exactly the same.. I got 3 to work fine, but when I go to add the 4th it wont load.. any ideas?

Please PM me, thanks..
Reply With Quote
  #48  
Old 08-19-2006, 05:58 PM
KevNJ KevNJ is offline
 
Join Date: Jan 2005
Posts: 310
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Eddie Raps
When I attempt to add a 4th marker the map doesnt load for some reason.. I copied and pasted everything exactly the same.. I got 3 to work fine, but when I go to add the 4th it wont load.. any ideas?

Please PM me, thanks..

find
PHP Code:
function addPoints() { 
below that copy and past this

PHP Code:
newpoints[0] = new Array(-74.08437540.917748icon0'Austins Restaurant Junkyard Nightclub''<div id="popup"><br />Austins Restaurant Junkyard Nightclub<br />352 West Passaic Street<br />Rochelle Park, NJ 07662</div>'); 

see where it says
PHP Code:
newpoints[0
For every new marker/location/spot you want you need to change the 0 to a number... 1,2,3,4,5,6 etc.

PHP Code:
new Array(-74.08437540.917748
refers to the coordinates of this location.

PHP Code:
icon0 
is the marker they will be shown when the location is loaded.

PHP Code:
'Austins Restaurant Junkyard Nightclub'
is the name of the location

the rest
PHP Code:
'<div id="popup"><br />Austins Restaurant Junkyard Nightclub<br />352 West Passaic Street<br />Rochelle Park, NJ 07662</div>'); 
is to show in a popup window and does not have to be included.
Reply With Quote
  #49  
Old 08-20-2006, 09:51 PM
Eddie Raps Eddie Raps is offline
 
Join Date: Jul 2006
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

i did that and its still not working
Reply With Quote
  #50  
Old 08-21-2006, 01:45 AM
KevNJ KevNJ is offline
 
Join Date: Jan 2005
Posts: 310
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

post your coding please
Reply With Quote
  #51  
Old 11-14-2006, 12:25 PM
phonexpo phonexpo is offline
 
Join Date: Sep 2005
Location: Dublin
Posts: 231
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hi Kev,

Would this code work with 3.6.0 ?

Thanks,

Patrick
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:25 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.06318 seconds
  • Memory Usage 2,376KB
  • Queries Executed 25 (?)
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
  • (17)bbcode_php
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (6)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (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_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • 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
  • 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
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete