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
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:
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:
Then your html output for the map would be:
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
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 & 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 -->
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 & 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
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
Re: [Tom P] GeoCoder Map Pins
By nmsinc - December 31, 2011
Hi Tom,
I'm still having fits with this - I have attempted to code the changes you suggested with no luck. I have attached a complete copy of this page which is a very simple listing page using the geoCode plugin for multiple addresses which is working fine. The only change I need is to make the map markers numerical to match the listings as they are posted. Can you look this over and point out what code changes need to be addressed here as I'm totaly lost on this one?
Thanks - nmsinc
I'm still having fits with this - I have attempted to code the changes you suggested with no luck. I have attached a complete copy of this page which is a very simple listing page using the geoCode plugin for multiple addresses which is working fine. The only change I need is to make the map markers numerical to match the listings as they are posted. Can you look this over and point out what code changes need to be addressed here as I'm totaly lost on this one?
Thanks - nmsinc
nmsinc
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:
Hope this helps
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/
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!
Worked perfect - thanks for your help!
nmsinc