GeoCoder Map Pins

7 posts by 3 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: December 31, 2011   (RSS)

By nmsinc - December 30, 2011

Anyone know how to add numbers or letters to a map pin within GeoCoder. I have a need where a client wants the map pin to have a number that is associated with the listing:

The page populates with the a text listing of name and address for each file and a map showing location of each. Client wants a map pin beside the listing name in numerical order starting with first listing #1, second listing #2 and so on with the push pin on the map having the same number for easy location on the map. The numbers will always populate in numerical order even if the If the list order changes in any way - any ideas?

Thanks - nmsinc
nmsinc

Re: [nmsinc] GeoCoder Map Pins

By (Deleted User) - December 30, 2011

Hi nmsinc,

The full gamut of google maps api features can be found at http://code.google.com/apis/maps/

However, if you're using a static map generated on the fly, this might help:

list($records, $recordMetaData) = getRecords(array(
'tableName' => 'table',
));

$i = 1;
foreach ( $records as $record ) {

$latitude = $record['latitude'];
$longitude = $record['longitude'];

$mapForRecord = "http://maps.googleapis.com/maps/api/staticmap?center=$latitude,$longitude&zoom=15&size=400x400&maptype=roadmap&markers=color:blue%7Clabel:$i%7C$latitude,$longitude&sensor=false";

$i = $i + 1;

}

The above creates a map from google centered on $latitude*$longitude with their standard zoom level and the size of the map set to 400x400 (pixels).
The type of map is set to roadmap but could be satellite, hybrid etc etc.
The markers bit is what you were asking about - essentially you can have any number of markers, each with their own color and label (in this case, 'blue' and '$i') - the send references to $latitude and $longitiude place the marker at those coordinates (they don't have to be the same as the center of the map).
The last variable 'sensor' is for location enabled devices - it's set to off as we don't need a directions or distance to/from calculation.


To have all the pins appear on one map, you would have to add the url for the map being generated, sort of like this:

$latitude = //some latitude;
$longitude = // some longitude;

$mapShowingAllPins = "http://maps.googleapis.com/maps/api/staticmap?center=$latitude,$longitude&zoom=15&size=400x400&maptype=roadmap";

$i = 1;
foreach ( $records as $key => $record ) {

$latitude = $record['latitude'];
$longitude = $record['longitude'];

$mapShowingAllPins.= "&markers=color:blue%7Clabel:$i%7C$latitude,$longitude";

$i = $i + 1;
}

$mapShowingAllPins.= "&sensor=false";

Then your html output for the map would be:

<img src="<?php echo $mapShowingAllPins; ?>" width='400' height='400' border='0' alt='Map with all the pins' title='Map'/>

The use of $i (and incrementing it) is arbitrary (assigning a sequence of numbers 1,2,3...to each pin). You'd have to associate the value of $i with each appropriate record when displaying the map as well (so you could, for example, add a new field to record while in the foreach loop along the lines of "$records[$key]['mapPinNumber'] = $i;").

Hope that helps,

Tom

Re: [Tom P] GeoCoder Map Pins

By nmsinc - December 30, 2011

Hi Tom,

I have tried to impliment your suggestion with no luck - I'm using the code for multiple addresses that's suggested with the CMS plugin below, can you provide edits to accomplish what I need using this code?

Thanks - nmsinc

<!-- Start Map Here -->
<!-- STEP2: Map with multiple addresses: add this to body tag: onload="initialize() -->
<body onload="initialize()">
<!-- STEP2: Map with multiple addresses -->

<h1><font size="5">Attraction &amp; Fun things to do in Alliance</font></h1>
<p>TIP: Click on markers for more details.</p>

<!-- STEP3: Map with multiple addresses: Put this where you want your map disattractionsed, rename $myRecords if needed -->
<?php $hasAddresses = array_filter(array_pluck($attractionsRecords, 'latitude')); ?>
<?php if ($hasAddresses): ?>
<div id="map_canvas" style="width: 550px; height: 950px; float: left; margin: 0px 15px;"></div>
<?php endif ?>

<?php if (!$hasAddresses): ?>
<div style="width: 650px; height: 550px; float: left; margin: 0px 15px; border: 1px solid #000;">
<div style="text-align: center; padding-top: 135px">
No map available!
</div>
</div>
<?php endif ?>
<!-- STEP3: /Map with multiple addresses -->


<!-- STEP4: Map with multiple addresses: Set the popup window content, rename $myrecords if needed -->
<div id="marker_details" style="display: none;">
<?php foreach ($attractionsRecords as $record): ?>

<?php // marker_infowindow_### is the content disattractionsed in the info-window on click ?>
<div id="marker_infowindow_<?php echo $record['num']; ?>" style="position: absolute; top: 1132px; left: 722px; width: 26px; height: 28px; z-index: 1">
<font size="2">
<b><?php echo $record['title'] ?></b></br>
<font size="1">
<?php echo $record['address'] ?><br/>
<?php echo $record['city'] ?>, <?php echo $record['state'] ?>, <?php echo $record['zip'] ?><br>

<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>


<?php endif ?>
<?php endforeach ?>


<!-- <a href="<?php echo $record['_link']; ?>">details</a> -->
</div>

<?php endforeach ?>
</div>
<!-- STEP4: Map with multiple addresses -->

<!-- End Map Here -->
nmsinc

Re: [nmsinc] GeoCoder Map Pins

By (Deleted User) - December 30, 2011

Hi nmsinc,

The code you included seems to be missing "Step 1" which is where all the latitudes and longitudes etc are setup for the api.

Attached is a complete page (map.php) which just needs the appropriate table name inserted into line 14 (in place of "theTableName"). It should produce a map as long as the latitude and longitude fields exist in the source table data (and are populated!).

Let me know if it works!

Thanks,

Tom
Attachments:

map.php 5K

Re: [nmsinc] GeoCoder Map Pins

By Jason - December 31, 2011

Hi,

In order to do this, you need to dynamically create that pin icon for each record. Try these changes to the code:

<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
$pinNum = 0;
foreach ($attractionsRecords as $record) {
$pinNum++;
if (!$record['latitude'] || !$record['longitude']) { continue; }
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', {$pinNum}";
print " _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

//
function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, pinNum) {
var latLng = new google.maps.LatLng(latitude, longitude);
var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
var image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+pinNum+"|ff776b|000000";
var marker = new google.maps.Marker({ map: map, position: latLng, icon:image });
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>

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] GeoCoder Map Pins

By nmsinc - December 31, 2011

Hi Jason,

Worked perfect - thanks for your help!
nmsinc