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: [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: [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
nmsinc
Attachments:

list_005.php 13K

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