Geocoder: showing maps from more than one table

3 posts by 2 authors in: Forums > CMS Builder
Last Post: October 22, 2012   (RSS)

By hiroko - October 19, 2012

Hello,

Thank you for the website membership upload reply last month, I have not got it to work, but thought I would get done with the other parts first.
Now I am having trouble with the geocoder. Please help.

I am trying to show a single map on my detail page from several leftjoin fields.
I cannot figure out how to write in the <head> part. I have tried listing them with a comma and {}, but not working.

I want to show all the maps for :
gallery_list_a_i.gallery_a_i
gallery_list_j_r.gallery_j_r
gallery_list_s_z.gallery_s_z
gallery_list_123.gallery_123
museum_list_a_n.museum_a_n
museum_list_o_z.museum_o_z


here is my code at top
// load record from 'event'
list($eventRecords, $eventMetaData) = getRecords(array(
'tableName' => 'event',
'where' => 'event.num = ' . getNumberFromEndOfUrl(),
'loadUploads' => true,
'allowSearch' => false,
'limit' => '1',
'leftJoin' => array(
// foreign table => local field (that matches num in foreign table)
'gallery_list_a_i' => 'gallery_a_i',
'gallery_list_j_r' => 'gallery_j_r',
'gallery_list_s_z' => 'gallery_s_z',
'gallery_list_123' => 'gallery_123',
'museum_list_a_n' => 'museum_a_n',
'museum_list_o_z' => 'museum_o_z',
),
));
$eventRecord = @$eventRecords[0]; // get first record
if (!$eventRecord) { dieWith404("Record not found!"); } // show error message if no record found

?>
<?php if (!@$GLOBALS['GEOCODER_PLUGIN']) { die("You must activate the Geocoder plugin before you can access this page."); } ?>

and here for <head>.
(right now, this is working for this field but don't know how to work with more than one field.
<!-- STEP1: Map with single address: Put this in the <head> of your page, rename $record if needed -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latitude = <?php echo floatval(@$eventRecord['gallery_list_a_i.latitude']); ?>;
var longitude = <?php echo floatval(@$eventRecord['gallery_list_a_i.longitude']); ?>;
var mapCanvasId = 'map_canvas';
if (latitude) {
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var latLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({map: map, position: latLng });

map.setCenter(latLng);
map.setZoom(14);
}
}
</script>
<!-- /STEP1: Map with single address -->

in the body,
<div id="gallerymap">
<?php if (@$eventRecord['gallery_list_a_i.latitude']): ?>
<div id="map_canvas" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['gallery_list_j_r.latitude']): ?>
<div id="map_canvas" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['gallery_list_s_z.latitude']): ?>
<div id="map_canvas" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['gallery_list_123.latitude']): ?>
<div id="map_canvas" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['museum_list_a_n.latitude']): ?>
<div id="map_canvas" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['museum_list_o_z.latitude']): ?>
<div id="map_canvas" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
</div>

Re: [hiroko] Geocoder: showing maps from more than one table

By gregThomas - October 22, 2012

Hi,

We've never tried displaying more than one map at a time on a page, but it should be possible by doing something like this:

The first change you need to make is to have different ID's for each map, as you shouldn't have the same ID twice on a page. Maybe you could do something like this:

<div id="gallerymap">
<?php if (@$eventRecord['gallery_list_a_i.latitude']): ?>
<div id="map_canvas1" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['gallery_list_j_r.latitude']): ?>
<div id="map_canvas2" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['gallery_list_s_z.latitude']): ?>
<div id="map_canvas3" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['gallery_list_123.latitude']): ?>
<div id="map_canvas4" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['museum_list_a_n.latitude']): ?>
<div id="map_canvas5" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
<?php if (@$eventRecord['museum_list_o_z.latitude']): ?>
<div id="map_canvas6" style="width: 299px; height: 299px; float: left; margin: 0px 0px;"></div>
<?php endif ?>
</div>

The second problem is that the JavaScript is only initializing the first map. So you need to copy the code so that it will initialize each map. You could try something like this:

<script type="text/javascript" >
function initialize() {

//For map 1 (#map_canvas1)
var latitude = <?php echo floatval(@$eventRecord['gallery_list_a_i.latitude']); ?>;
var longitude = <?php echo floatval(@$eventRecord['gallery_list_a_i.longitude']); ?>;
var mapCanvasId = 'map_canvas1';
if (latitude) {
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var latLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({map: map, position: latLng });

map.setCenter(latLng);
map.setZoom(14);
}

//For map 2 (#map_canvas2)
var latitude = <?php echo floatval(@$eventRecord['gallery_list_j_r.latitude']); ?>;
var longitude = <?php echo floatval(@$eventRecord['gallery_list_j_r.longitude']); ?>;
var mapCanvasId = 'map_canvas2';
if (latitude) {
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map2 = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var latLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({map: map2, position: latLng });

map2.setCenter(latLng);
map2.setZoom(14);
}

//For map 3 (#map_canvas3)
var latitude = <?php echo floatval(@$eventRecord['gallery_s_z.latitude']); ?>;
var longitude = <?php echo floatval(@$eventRecord['gallery_s_z.longitude']); ?>;
var mapCanvasId = 'map_canvas3';
if (latitude) {
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map3 = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var latLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({map: map3, position: latLng });

map3.setCenter(latLng);
map3.setZoom(14);
}

}

</script>

You will need to add the code for the other three maps into the initialize function using the current layout and changing the variables highlighted in blue for each new map.

Let me know if this doesn't work.

Thanks
Greg Thomas







PHP Programmer - interactivetools.com