SETTING UP MULTI PIN MAPS USING THE GEOCODER PLUGIN - Nov 15th, 2018
|
I needed to display a multi pin map from an accounts section of directory subscribers using the Geocoder plugin and was
a bit lost until Daniel Loewe from Interactive Tools came to my rescue.
I had a few search criteria to implement:
1) Allow for limiting searches to within a radius around a zip code
2) Exclude any account records from the search results that had either one of 2 check boxes checked (isAdmin and
notAdmin).
3) Exclude any account record from the search results that was not updated within the last 6 months
4) Display custom information when a pin is clicked/tapped
I also wanted to include error messages for invalid zip code entries and for when there were no search results matching
the search criteria, with telltale indicators of the submitted search.
Here's what we came up with.
At the top of the search page after the load records calls:
$kmOrMiles = 'miles'; // can be 'miles' or 'km'
$geoOptions = [];
if (!empty( $_REQUEST['fromAddress'] )) {
// get geocoding data
list($myLat, $myLng) = geocodeAddress( @$_REQUEST['fromAddress'] );
$geoOptions = geocoder_getOptions($myLat, $myLng, @$_REQUEST['maxDistance'], $kmOrMiles);
}
// get records
$sixMonthsAgo = strtotime( '6 months ago' );
list($myRecords, $myMetaData) = getRecords(array(
'tableName' => $GLOBALS['GEOCODER_SAMPLE_TABLENAME'],
'where' => " (isAdmin = '0' OR isAdmin = '') AND (notAdmin = '0' OR notAdmin = '') AND updatedDate > '" .
date('Y-m-t H:i:s', $sixMonthsAgo) . "'",
) + $geoOptions); // geoOptions WILL NOT override the above options
$errorsAndAlerts = '';
if (@$_REQUEST['save'])
{
@$count = '';
$action = '' ;
@$count = mb_strlen($_REQUEST['fromAddress'] );
// echo $count ;
if (!@$_REQUEST['fromAddress']) { $errorsAndAlerts .= ""; }
elseif (@$count < 5 ) { $errorsAndAlerts .= "Your zip/postal code must be at least 5
digits long.\n"; }
elseif (!$myLat || !$myLng) { $errorsAndAlerts .= "Please enter a valid zip/postal code\n"; }
}
?>
Then in the head of the page:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo
htmlEncode($GLOBALS['GEOCODER_GOOGLE_API_KEY']); ?>"></script>
<script type="text/javascript">
function initialize() {
var mapCanvasId = 'map_canvas';
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
<?php
foreach ($myRecords as $record) {
if (!$record['latitude'] || !$record['longitude']) { continue; }
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .jsEncode($record['_link']).
"'";
print " _geocoder_addMarker($jsFunctionArgs);\n";
}
?>
//
function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
var latLng = new google.maps.LatLng(latitude, longitude);
var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
var marker = new google.maps.Marker({ map: map, position: latLng });
google.maps.event.addListener(marker, 'click', function() {
if (infowindowEl) {
infowindow.setContent(infowindowEl.innerHTML);
infowindow.open(map, marker);
}
else {
window.location = detailLink;
}
});
bounds.extend(latLng);
}
//
map.fitBounds(bounds);
}
</script>
The search form in the body of the page:
<form method="post" action= "?">
<input type="hidden" name="save" value="1" />
<input type="hidden" name="km_miles" value="<?php echo $kmOrMiles ?>" />
<table>
<tr>
<td valign="top" align="right" class="text_font"><b>Enter A Zip/Postal Code
</b></td>
<td align="left" valign="top" colspan="2"><input type="text" name="fromAddress" value="<?php echo
htmlspecialchars(@$_REQUEST['fromAddress']); ?>" size="38" class="text_font" style="background-color:#<?php echo
$dbt_colorsRecord['main_box_background_color'] ?>;" placeholder="Please Enter A Zip/Postal Code" id="zip">
</td>
</tr>
<tr>
<td align="right" class="text_font"><b>And A Distance To Narrow Your Search
</b></td>
<td align="left" valign="top" colspan="2"><select name="maxDistance" width="300" class="text_font"
style="width: 300px; max-height: 50px; background-color:#<?php echo $dbt_colorsRecord['main_box_background_color'] ?>;">
<option value="">At Any Distance</option>
<option value="100" <?php selectedIf(100, @$_REQUEST['maxDistance']) ?> >within 100
<?php if ( $kmOrMiles == 'miles'):?>
miles
<?php elseif ( $kmOrMiles == 'km'):?>
km
<?php endif ?>
</option>
<option value="50" <?php selectedIf( 50, @$_REQUEST['maxDistance']) ?> >within 50
<?php if ( $kmOrMiles == 'miles'):?>
miles
<?php elseif ( $kmOrMiles == 'km'):?>
km
<?php endif ?>
</option>
<option value="25" <?php selectedIf( 25, @$_REQUEST['maxDistance']) ?> >within 25
<?php if ( $kmOrMiles == 'miles'):?>
miles
<?php elseif ( $kmOrMiles == 'km'):?>
km
<?php endif ?>
</option>
<option value="10" <?php selectedIf( 10, @$_REQUEST['maxDistance']) ?> >within 10
<?php if ( $kmOrMiles == 'miles'):?>
miles
<?php elseif ( $kmOrMiles == 'km'):?>
km
<?php endif ?>
</option>
<option value="5" <?php selectedIf( 5, @$_REQUEST['maxDistance']) ?> >within 5
<?php if ( $kmOrMiles == 'miles'):?>
miles
<?php elseif ( $kmOrMiles == 'km'):?>
km
<?php endif ?>
</option>
</select></td>
</tr>
<tr>
<td align="right" class="text_font"><b> </b></td>
<td align="left" valign="bottom" colspan="2"><input type="submit" value="Submit Search Filters" ></td>
</tr>
</table>
</form>
And where I wanted the form to be displayed:
<?php $hasAddresses = array_filter(array_pluck($myRecords, 'latitude')); ?>
<?php if ($hasAddresses): ?><span class="heading-text" style="color:#F03">CLICK/TAP A PIN FOR MORE
INFORMATION</span>
<div id="map_canvas" style="width: 800px; height: 800px;; float: left; margin: 0px 15px;"></div>
<?php else :?>
<span class="heading-text" style="color:#F03">Sorry, there are no provider listings
<?php if ($myLat):?>
within
<?php if (@$_REQUEST['maxDistance']):?>
<?php echo htmlspecialchars(@$_REQUEST['maxDistance']); ?>
<?php else:?>
unlimited
<?php endif ?>
<?php if ( @$_REQUEST['km_miles'] == 'miles'):?>
miles
<?php elseif ( @$_REQUEST['km_miles'] == 'km'):?>
km
<?php endif ?>
<?php endif?>
of <?php echo htmlspecialchars(@$_REQUEST['fromAddress']); ?>.</span>
<?php endif ?>
<div id="marker_details" style="display: none;">
<?php foreach ($myRecords as $record): ?>
<?php
$updateUnixTime = strtotime( $record['updatedDate'] ); // seconds since 1970
$sixMonths = time() - (180*60*60*24) ; //(changed from + to -)
$sixMonthsGone = $updateUnixTime > $sixMonths;
?>
<?php if((!$record['isAdmin'] ==1 || !$record['notAdmin'] == '1') || !$record['hidden'] == '1' || ( $sixMonthsGone) ):?>
<?php // marker_infowindow_### is the content displayed in the info-window on click ?>
<div id="marker_infowindow_<?php echo $record['num']; ?>">
<h3><?php echo htmlencode( @$record['practice_name']); ?><?php echo htmlencode(
@$record['practice_street_address']); ?>
<?php echo htmlencode( @$record['practice_city']); ?>, <?php echo htmlencode( @$record['practice_state']);
?> <?php echo htmlencode( @$record['practice_zip']); ?></h3>
<a href="<?php echo $record['_link']; ?>"><span class="text_font">Learn About This Provider</span></a> </div>
<?php endif ?><?php endforeach ?>
</div>
|
The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact
Interactive Tools for information on the downloading of the software or the purchasing of licenses.
