Geocoder: showing maps from more than one table

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

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

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

By hiroko - October 22, 2012

Thank you so much for your help!!
It worked great!

hiroko