I got the map display working. So far I haven't been able to do away with the Geocode button, i.e. doing the geocoding on form submit rather than needing a button push.
Here's what I have so far (which supercedes the instructions above).
1) In your ./js/40.js file, put the following:
Code:
function load_map(latlat,latlong) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(latlat,latlong), 13);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>GPS Coords</b><br />Lat: " + latlat + "<br />Long: " + latlong);
});
map.addOverlay(marker);
marker.openInfoWindowHtml("<b>GPS Coords</b><br />Lat: " + latlat + "<br />Long: " + latlong); }
}
function do_geocode() {
var geocoder = new GClientGeocoder();
var address = $('jos_fabrik_formdata_40___address1').value + ', ' + $('jos_fabrik_formdata_40___city').value + ', ' + $('jos_fabrik_formdata_40___state').value + ' ' + $('jos_fabrik_formdata_40___postcode').value;
geocoder.getLatLng(
address ,
function(point) {
if (!point) {
alert('Could not find location of ' + address);
}
else {
$('jos_fabrik_formdata_40___latlon').value = point.toString();
}
}
);
}
2) Clone the default template (as per
this thread), and replace the content of template.php with the following:
Code:
<?php /**
* @package fabrik
* @version 1.0.4
* @Copyright (C) Rob Clayburn
* @license GNU/GPL http://www.gnu.org/copyleft/gpl.html
*/
/* MOS Intruder Alerts */
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAq-gv5SfH67XHsplhIHIPjxRWgZKhnXaB5STlb57LvQlAVAJYnxRhIjPFR_NuuqSzqGmLP2Oyi_6JNA" type="text/javascript"></script>
<h1><?php echo $this->form->title;?></h1>
<?php echo $this->topJS;
echo $this->form->intro;?>
<?php if( $this->form->error != '' ){
echo "<div class='fabrikerror'>" . $this->form->error . "</div>";
}?>
<form action="<?php echo $this->form->action;?>" class="fabrikForm" <?php echo $this->form->js;?> method="post" name="<?php echo $this->form->name;?>" id="<?php echo $this->form->name;?>" enctype="<?php echo $this->form->encType;?>">
<?php if($this->showEmail){
echo $this->emailLink;
}?> <?php if($this->showPDF){
echo $this->pdfLink;
}?> <?php if($this->showPrint){
echo $this->printLink;
}?> <?php
foreach( $this->groups as $group ){?>
<h3><?php echo $group->title;?></h3>
<?php if($group->canRepeat && $this->task != 'viewTableRowDetails' ){?>
<div><a class="addGroup" href="#" id="<?php echo $group->addId;?>"><?php echo _ADD;?></a> | <a class="deleteGroup" href="#" id="<?php echo $group->delId;?>"><?php echo _DELETE;?></a></div>
<?php }?>
<div class="fb_group" id="group<?php echo $group->id;?>" style="<?php echo $group->css;?>">
<?php if($group->canRepeat){
$subgroupCounter = 0;
foreach($group->subgroups as $subgroup){?>
<div class="fb_sub_group" id="subgroup<?php echo $group->id . "_" . $subgroupCounter;?>">
<?php foreach( $subgroup as $element ){?>
<div class="<?php echo $element->divclass ?>" id="fb_element_<?php echo $element->int;?>">
<?php if($element->error != ''){?>
<div class="fabrikerror"><?php echo $element->error;?></div>
<?php }?>
<?php echo $element->label;?>
<?php echo $element->element;?>
</div>
<?php }?></div>
<?php $subgroupCounter ++;
} ?>
<?php }else{?>
<?php foreach( $group->elements as $element ){?>
<div class="<?php echo $element->divclass ?>" id="fb_element_<?php echo $element->int;?>"><?php if($element->error != ''){?>
<div class="fabrikerror"><?php echo $element->error;?></div>
<?php }?> <?php echo $element->label;?> <?php echo $element->element;?>
</div>
<?php
if ($element->id == 'jos_fabrik_formdata_40___latlon') {
$latlong = $element->value;
}
}
if (empty($this->form->submitButton))
{
if ($latlong) {
?>
<script type="text/javascript">
window.addEvent('load', function(){
load_map<?php echo $latlong; ?>;
});
</script>
<div id="map" style="width: 500px; height: 300px"></div>
<?php
}
}
else {
?>
<script type="text/javascript">
$('fabrik40').addEvent('submit',function(e){ do_geocode(); });
</script>
<?php
}
}?>
</div>
<?php
}
?><?php echo $this->hiddenFields;
echo $this->ask_receipt?>
<div class="fabrikActions"><?php echo $this->form->resetButton;?> <?php echo $this->form->submitButton;?>
</div>
</form>
<?php echo $this->jsActions; ?>
<div id="fabrikScroller"></div>
3) On your Geocode button (the one that calculates the latlong), replace the previous javascript 'onclick' code with this:
The way this hangs together is:
When you are editing or submitting a form, the map is not displayed, but the Geocode button is.
When you view a record in View mode, the Geocode button is not displayed, but the map is displayed.
Remember to replace all occurrences of 40 in the above with your form ID. Or if your table was created outside of Fabrik, replace all occurences of jos_fabrik_formdata_40 with your table name.
I set all the above up on my test server, and it works quite nicely. See attached screenshot.
-- hugh
