jReviews Support Forum

jReviews 1.x => Tips & tricks => Topic started by: mrscripto on January 28, 2008, 12:36:59 AM


Title: Google Map - Showing Locations from jReviews listings
Post by: mrscripto on January 28, 2008, 12:36:59 AM
Finally, my contribution to the forum... hopefully someone will find this useful.

I wanted a world map showing all of the locations of Tequila Bars in my reviews section and this is what I came up with. You will need to modify the code based on your category ID, and jr fields. And I added a new field for a GPS coordinate, as I didn't have much luck using a longitude and latitude entry.

http://bars.tequila.net (example)

(http://www.tequila.net/images/stories/tequila/tequila_bars_stores_world.jpg)

Code:
<html>
<head>
<STYLE>
   body {
      font-family:arial;
   }
</STYLE>
<title>Page Title</title>
<meta name="description" contents="meta_description">
<meta name="keywords" contents="meta_keywords">
</head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=enter_really_long_google_api_key_here" type="text/javascript"></script>
<script type="text/javascript">
var map;
function load() {
        if (GBrowserIsCompatible()) {
               map = new GMap2(document.getElementById("map"));
               map.addControl(new GMapTypeControl());
               map.addControl(new GLargeMapControl());
               map.addControl(new GScaleControl());
               map.setCenter(new GLatLng(21.943046, -51.328125), 2, G_HYBRID_MAP);

                      // Create a custom map pointer icon

           var barIcon = new GIcon(G_DEFAULT_ICON);
           barIcon.image = "http://www.yoursite.com/image.png";

    // Set up custom GMarkerOptions icon
markerOption2 = { icon:barIcon };

<?php
//connect to the database
$db = "your_database_name";
$hostname = "localhost";
$password = "database_password";
$user = "database_user";

 $open = mysql_connect($hostname,$user,$password);
 mysql_select_db("$db",$open);

//query for bars, enter appropriate category id below, catid, and field names

$bars_sql = "SELECT jos_content.id, jos_content.catid, jos_content.title, jos_jreviews_content.jr_bargps, jos_jreviews_content.jr_baraddress, jos_jreviews_content.jr_barcity, jos_jreviews_content.jr_barstate
FROM jos_content, jos_jreviews_content
WHERE jos_content.catid = '39'
AND jos_jreviews_content.contentid = jos_content.id
AND jos_content.state = '1'
AND jos_jreviews_content.jr_bargps != 'NULL'";

 $result_bars = mysql_query("$bars_sql");
 $barscount = mysql_numrows($result_bars);

    for($i=0; $i<$barscount; $i++)
    {
 $page .= 'var marker'.($i+1).' = new GMarker(new GLatLng('.mysql_result($result_bars,$i,"jos_jreviews_content.jr_bargps").'), markerOption2);
GEvent.addListener(marker'.($i+1).', \'click\', function() { marker'.($i+1).'.openInfoWindowHtml("<div style=\'width: 150px; height: 55px;\'><div style=\'float: left; width: 150px; height: 55px;\'><table width=\'100%\'><tr><td align=\'center\' valign=\'middle\'><font size=\'-2\'><a href=\'http://www.yoursite.com/'.str_replace(" ", "_", strtolower(mysql_result($result_bars,$i,"jos_content.title"))).'.html\' target=\'_blank\'>'.mysql_result($result_bars,$i,"jos_content.title").'<br>'.mysql_result($result_bars,$i,"jos_jreviews_content.jr_baraddress").'<br>'.mysql_result($result_bars,$i,"jos_jreviews_content.jr_barcity").', '.str_replace("*", "", mysql_result($result_bars,$i,"jos_jreviews_content.jr_barstate")).'</font></a></td></tr></table></div></div>"); });
map.addOverlay(marker'.($i+1).');';
 $page .= "\n";
    }

echo $page;

?>
        }
}
</script>
<body bgcolor='#FFFFFF' text='#000000' link='#FF0000' alink='#FF0000' vlink='#FF0000' onload="load()" onunload="GUnload()">
<table style="width: 100%; height: 100%;">
<tr><td><a href="http://www.yoursite.net"><img src="http://www.yoursite.com/logo.jpg" border="0"></a></td><td align='center' style="height: 70px;"><font color='#000000' size='-1'>
<b>Map options:</b><br>Click to Zoom Areas:
<span style='cursor: pointer;' onclick='map.setCenter(new GLatLng(39.504153, -94.928521), 4);'><u>United States</u></span> -
<span style='cursor: pointer;' onclick='map.setCenter(new GLatLng(22.877440,-101.777344), 5);'><u>Mexico</u></span> -
<span style='cursor: pointer;' onclick='map.setCenter(new GLatLng(21.943046, -51.328125), 2);'><u>World</u></span><br>
</font></td></tr>
<tr><td style="height: 100%" colspan="2">
<div align='center' id="map"  style="width: 100%; height: 100%"></div>
</td></tr><tr><td colspan="2"><font color='#000000' size='-1'>Instructions: Click on the pointer location to view the name and address, then click on the text to view the listing for that location.</font>
</td></tr></table>
</body>
</html>


Title: Re: Google Map - Showing Locations from jReviews listings
Post by: andreasa on February 05, 2008, 08:54:05 AM
Great work!
Thank you very much for shared it.

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: bryanjer on March 05, 2008, 10:15:57 AM
Ok, so I tried working with the code recommendations you have here... so far i can get the map to load up ok, but i cant get any markers to be displayed at all.

What I did was create a text field in jreviews to represent a comma delimited lat/lon for the coordinates.  And then I tweaked the variable names, etc.  If it makes a difference,  I just created a separate menu link to an html file... just in case that may limit my access to the mysql db.

Would you have any suggestions for why I wouldn't be getting markers created?  I only have one entry in the db right now for testing, but I can say that Ive verified the data in the sql tables themselves.

Im new to playing with php and google maps at the code level, so any thoughts would be very helpful.  Thanks in advance!

Code:

<html>
<head>
<STYLE>
   body {
      font-family:arial;
   }
</STYLE>
<title>Page Title</title>
<meta name="description" contents="meta_description">
<meta name="keywords" contents="meta_keywords">
</head>
<script

src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=myKey

TA" type="text/javascript"></script>
<script type="text/javascript">
var map;
function load() {
        if (GBrowserIsCompatible()) {
               map = new GMap2(document.getElementById("map"));
               map.addControl(new GMapTypeControl());
               map.addControl(new GLargeMapControl());
               map.addControl(new GScaleControl());
               map.setCenter(new GLatLng(21.943046, -51.328125), 2, G_HYBRID_MAP);

                // Create a custom map pointer icon

var barIcon = new GIcon(G_DEFAULT_ICON);
barIcon.image = "http://www.travltrails.com/image.png";

// Set up custom GMarkerOptions icon
markerOption2 = { icon:barIcon };

<?php
//connect to the database

$db = "my_database_name";
$hostname = "localhost";
$password = "my_password";
$user = "my_username";

$open = mysql_connect($hostname,$user,$password);

mysql_select_db("$db",$open);


//query for bars, enter appropriate category id below, catid, and field names

$trails_sql = "SELECT jos_content.id, jos_content.catid, jos_content.title, jos_jreviews_content.jr_traillatlon, 

jos_jreviews_content.jr_state"

FROM jos_content, jos_jreviews_content

WHERE jos_content.catid = '14'
AND jos_jreviews_content.contentid = jos_content.id
AND jos_content.state = '1'
AND jos_jreviews_content.jr_traillatlon != 'NULL'";
$result_trails = mysql_query("$trails_sql");
$trailscount = mysql_numrows($result_trails);

   for($i=0; $i<$trailscount; $i++)
$page .= 'var marker'.($i+1).' = new GMarker(new 

GLatLng('.mysql_result($result_trails,$i,"jos_jreviews_content.jr_traillatlon".)', markerOption2);

GEvent.addListener(marker'.($i+1).', \'click\', function() { marker'.($i+1).'.openInfoWindowHtml("<div style='width: 150px; 

height: 55px;\'>

<div style=\'float: left; width: 150px; height: 55px;\'>

<table width=\'100%\'>
<tr>
<td align=\'center\' valign=\'middle\'><font size=\'-2\'>

<a href=\'http://www.travltrails.com/'.str_replace(" ", "_", 

strtolower(mysql_result($result_trails,$i,"jos_content.title"))).'.html\' 

target=\'_blank\'>'.mysql_result($result_trails,$i,"jos_content.title").'<br>'.', '.str_replace("*", "", 

mysql_result($result_trails,$i,"jos_content.state")).'</font></a>

</td>
</tr>
</table>
</div>
</div>"); });
map.addOverlay(marker'.($i+1).');';
 $page .= "\n";
    }

echo $page;

?>
        }
}
</script>
<body bgcolor='#FFFFFF' text='#000000' link='#FF0000' alink='#FF0000' vlink='#FF0000' onload="load()" onunload="GUnload()">

<table style="width: 690px; height: 500px;">
<tr>
<td></td>
<td align='center' style="height: 70px;"><font color='#000000' size='-1'>
<b>Map options:</b><br>Click to Zoom Areas:
<span style='cursor: pointer;' onclick='map.setCenter(new GLatLng(39.504153, -94.928521), 4);'><u>United States</u></span> -
<span style='cursor: pointer;' onclick='map.setCenter(new GLatLng(22.877440,-101.777344), 5);'><u>Mexico</u></span> -
<span style='cursor: pointer;' onclick='map.setCenter(new GLatLng(21.943046, -51.328125), 2);'><u>World</u></span><br>
</font>
</td>
</tr>
<tr>
<td style="height: 100%" colspan="2">
<div align='center' id="map"  style="width: 100%; height: 100%"></div>
</td>
</tr>
<tr>
<td colspan="2"><font color='#000000' size='-1'>Instructions: Click on the pointer location to view the name and address, then click on the

text to view the listing for that location.</font>
</td>
</tr>
</table>

</body>
</html>

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: tsr on April 16, 2008, 01:12:56 AM
in my humble opinion , its not safe to leave your db information there.
potential security risk. :o

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: gokrew on May 13, 2008, 08:34:22 AM
Hello, is it  possible to make to choose who inserts an article the map to visualize?
In my site the articles are about travels around the world. Sections correspond to continents and categories to states.
Is it possible to insert in template  "com_content.html"  a link to google maps so that the user ( a user regual register in my site and Logged in)  insert a new travel, for example in Spain, there will appear a map of Spain in an article and under the form with photos and reviews?
Or if the user insert a new travel in London there will appear a map of London.
Otherwise if it is possible to make something of similar.
Thanks  :)

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: nicolas.boseret on May 23, 2008, 11:27:25 AM
Hi there,
I love the concept and I' like to use it.

I've created a php page on my joomla directory but calling the page gives me HTTP ERROR 500 ...
is there anything I'd need to do to let this page be executed ?

Cheers,

Nicolas.

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: sko on September 16, 2008, 06:27:56 AM
Great Idee, a single map showing all listings is really a top idea!

hope this will get further development..  :)

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: greenericka on September 16, 2008, 12:57:09 PM
FYI, I'm using YooMaps with jReviews to do the same thing. The user submits a new listing through jReviews for the location and it appears on the YooMaps map. I tested it and it works.

There are two issues: one, the user has to enter the address/location for the title and two, the YooMaps module doesn't allow for the "Read More" link to work - so even though a user may submit a whole article with lots of information about the location, there is no way to access the whole article from the marker bubble (unless someone adds a hardcoded link to the marker bubble manually).

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: Adam on September 21, 2008, 02:21:38 AM
That 500 error in browser, can by from charset in joomla.
When I use ISO version i got error too.
Now I use utf languages and got no error.
( now I only use google map plugin to show map in details review, is not
map for all review in site - but i try soon that hack too :) )

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: mrscripto on September 23, 2008, 01:16:08 AM
I have not experienced any errors on mine, the only pain is getting the coordinates for each listing, as sometimes google maps can't find all addresses.

Send a PM if you need help, I'll do my best...

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: Adam on September 23, 2008, 09:05:19 AM
There is posibilty to use that map only with adress, city, province, country fileds, without Lat long data ?


Title: Re: Google Map - Showing Locations from jReviews listings
Post by: BigDutch#2 on December 10, 2008, 06:14:25 AM
if you have two fields (lat and lon) you can join in the select code :

CONCAT(jos_jreviews_content.jr_lat,', ',jos_jreviews_content.jr_lon) as jr_latlon

andreasa

My is getting the icon to display come over, ive tried to copy n paste your one but i can't get a transparent background.  Are there default markers and how are they brought in ?

EDIT : other icons found here so used one of them :

http://econym.googlepages.com/geicons.htm

Now any ideas on getting this into a module ?

Title: Re: Google Map - Showing Locations from jReviews listings
Post by: karate3029 on December 29, 2008, 01:46:30 PM
I can't get this to work, I want to list everything in this category:
http://slyspyder.com/index.php?option=com_jreviews&Itemid=37&url=Whats-Near-Me/whats-near-me_s13_m37/

Ideally, I'll like to show any listing with a address in my whole directory on the map.

I added a GPS Field, I entered in one as a test. 37.0625, -95.677068
Is that how I enter it?

Here is my map page - http://slyspyder.com/map/SlySpyderMap.php

Nothing shows, but if I look at the source code I see this:

Code:
var marker1 = new GMarker(new GLatLng(37.0625, -95.677068), markerOption2);
GEvent.addListener(marker1, 'click', function() { marker1.openInfoWindowHtml("<div style='width: 150px; height: 55px;'><div style='float: left; width: 150px; height: 55px;'><table width='100%'><tr><td align='center' valign='middle'><font size='-2'><a href='http://slyspyder.com/tokyo_sushi.html' target='_blank'>Tokyo Sushi<br>725 E 3300 S<br>Salt Lake City, UT</font></a></td></tr></table></div></div>"); });
map.addOverlay(marker1);

And the link doesn't go to the correct place.

I've attached my code to this message


Powered by SMF 1.1.7 | SMF © 2006-2008, Simple Machines LLC
Joomla Bridge by JoomlaHacks.com