vb.org Archive - Google Maps - Hot Spots

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.5 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=155)

- - Google Maps - Hot Spots - Events for vbaCMPS (https://vborg.vbsupport.ru/showthread.php?t=111426)

Google Maps - Hot Spots - Events for vbaCMPS

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.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>

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(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.

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.

A screenie would be beneficial ;)

where do you sign up to get a key?

Quote:

Originally Posted by fluentdesigns

where do you sign up to get a key?

By going here:
http://www.google.com/apis/maps/signup.html

I added this to the 1st topic just now as well. Thanks.

Im trying to make this module as a new page so I can link it in my main menu. I am not sure where to add the code to when adding a new page though. Any help would be great.

Adding the module as a new page ? Not sure Im following you.

To create a module
vBa CMPS > add module > template > then give it any module title you want, along with the column, and display order
Then give it a name where it says " template to include"I called my "googlemaps" so the name is now "adv_portal_googlemaps"

Then choose the style you want this to work with.
The paste the code listed above into the "template content" section.

Leave the rest as default, but set the usergroup persmissions at the bottom for whatever you would like. The click save.

Does this help ?

Well what im trying to do is make it so the map doesnt show up on my home page. I want it to show up as a seperate page on its own with the side blocks from cmps showing.

Quote:

Originally Posted by fluentdesigns

Well what im trying to do is make it so the map doesnt show up on my home page. I want it to show up as a seperate page on its own with the side blocks from cmps showing.

Im actually working on it this second for my own site.

* On edit- Just added instructions in orginal post.

at least u have keep an demo a/c for usrs to have a look on it.....reg. & then watch it.........!!!

Quote:

Originally Posted by Zia

at least u have keep an demo a/c for usrs to have a look on it.....reg. & then watch it.........!!!

Whoops.. try again.. should be able to view it now without having to register.

i dunno what it is but I am not understanding the directions for putting this on its own cmps page.

Quote:

Originally Posted by fluentdesigns

i dunno what it is but I am not understanding the directions for putting this on its own cmps page.

here someone made this for the world map mod its so much easier to do then it seems... read this text... i forget who made it but its very easy to do just change the name and code :)

Dang... first install? You guys should really click install if you are using this. While it doesn't allow people to add theit own markers like the other Googlemap mod, the author deserves your support.

Quote:

Originally Posted by kall

I didnt build upon his because of his little user agreement stating
"Attribution. You must give the original author credit.
Non-Commercial. You may not use this work for commercial purposes.
Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under a licence identical to this one. "
Only credit I would like is for people to click install when they use this mod.

And secondly he has in my opinion abandoned that mod/hack/plugin. He was working on it for a future release ( the hot spots ) yet hasnt updated it in months and hasnt even commented in the thread in weeks.

Thirdly - I used his mod on my forums, but I didnt want the users to be able to put in events and locations. I wanted it seperate so this can work seperately. If someone else wants to join the two together thats fine with me. But I dont see a use on my forums any longer to have the users put there house or locations in.

Enjoy.
Kevin

Added the site I use to convert an address into the lat and long.
http://stevemorse.org/jcal/latlon.php

Kev.. all I was saying was that people should click install.

:)

Quote:

Originally Posted by kall

Kev.. all I was saying was that people should click install.

:)

Thats what I figure, was just stating why I didnt add to his, incase it comes up in the future.

Did you have any problems with the install ? Do you add the markers, or images, and able to add it as a module ?

Any problems so I know what to fix?

Thanks

I have put it on a board I am building. Very Happy as I could not get my head round the Google talk and you have saved me the job.

http://www.beermad.com/view_beer-map.htm

Quote:

Originally Posted by Aftermath

Lovely hack! :D

Thanks! Any problems installing? did you add the other color markers, and the images inthe popups? Any feedback would be helpful to the install so I know if I need to add or change something.

Also if you could click install.

Thanks again.

for whatever reason I'm unable to get the popups to work. I even just copy/pasted your original code (with my api key) to the thing and it doesn't Pop. Seen this?

http://www.saltwaterbastards.com/ (bottom of main page for now)

i see the pop up click on the red dot

Austins Restaurant/ Junkyard Nightclub
352 West Passaic Street
Rochelle Park, NJ 07662

Hmm...so it's my PC. Lame!

Edit: It gets better, it's just my IE. :(

Could this be made into a plugin very easily? Super useful....

Quote:

Originally Posted by drewclark

Hmm...so it's my PC. Lame!

Edit: It gets better, it's just my IE. :(

Could this be made into a plugin very easily? Super useful....

Sometimes you have to close all your browsers for them to work. Its weird. Still having problems with it ? As for the plugin, not sure how to do those. Should just be a quick copy and paste.

ah, they are hardcoded into the page :( I was hoping I could use this for upcoming events, ie: user submits address of event, and if an event is scedualed at that location within the week, it would show up as a marker.

Quote:

Originally Posted by LICryptkeeper

I dont know to much about the backend of VB. I believe stoneyarch is back to modifing his. I htink he had plans for along the lines of what your looking for.

are there any other easier ways to get the lat and long of locations? I can see them on the google map, but I can't seem to get the lat + long to make some marker points.

how do I install these cool maps on VBB 3.5.3 ? Dont see anything called Add modules

Quote:

Originally Posted by Mathiau

how do I install these cool maps on VBB 3.5.3 ? Dont see anything called Add modules

those directions refer to vbadvanced.com 's CMPS ( content management portal system ) download it from theyre site install it and then follow the directions listed above...

or you could make a new html page and link it through the navbar by passing the add module part of the directions.

Quote:

Originally Posted by KevNJ

Well,

The other googlemap isn't gone it just went to version 2.0.1.

I was gone because I was working on the Xbox Live integration for the Xbox.com Community Developer Program.

So it's back.

Nice work on your mod btw.

Hi m8, only me :)

Any chance on this 1 working with MKPortal??

Ive never used MKPortal so I wouldnt be able to help you with that. Im assuming its like CMPS ?

Stony - Yea I noticed its gone to 2.0.1 now. Nice job. Only did mine cause I wanted hot spots, and you were tied up with the Xbox site. ( my 360 should be here tomorrow ) and then I decided against having the users post where they were from and adding locations them selves. More for me to monitor and such. But after you add the hotspots to your next version Ill add that back to my site to allower certain users ( bands and bars ) to post upcoming events. Cheers!

Not sure about CMPS but take a look at www.bashys-place.com

Quote:

Originally Posted by bashy

Not sure about CMPS but take a look at www.bashys-place.com

Based on your site and going to theirs. Im going to assume that you added the "live help" and "clock" sections yourself. Add the script into how you added those sections and it should work.

oooo, and thats it?
Note to self: Must have play tonight after work....
Thanks Kev will give it a try later :)

have to take a look here if your interested in a googlemap:

https://vborg.vbsupport.ru/showthread.php?t=99920

[high]* KW802 clicks install.
[/high]

KevNJ,

Thanks, this version will serve nicely for a few ideas I have in mind. :)

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01414 seconds Memory Usage 1,889KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (10)bbcode_php_printable (12)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: