Main
Index 		Search
Posts 		Who's
Online 		Log
In

Home: Products: CMS Builder: Plugins & Add-ons:
GeoCoder Map Pins

 
 


nmsinc
User

Dec 30, 2011, 8:08 AM

Post #1 of 7 (1184 views)
Shortcut
GeoCoder Map Pins Can't Post
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


Tom P
User


Dec 30, 2011, 11:51 AM

Post #2 of 7 (1174 views)
Shortcut
Re: [nmsinc] GeoCoder Map Pins [In reply to] Can't Post
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:

Code
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:

Code
 
$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:

Code
<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


nmsinc
User

Dec 30, 2011, 1:52 PM

Post #3 of 7 (1172 views)
Shortcut
Re: [Tom P] GeoCoder Map Pins [In reply to] Can't Post
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 -->


Tom P
User


Dec 30, 2011, 2:42 PM

Post #4 of 7 (1169 views)
Shortcut
Re: [nmsinc] GeoCoder Map Pins [In reply to] Can't Post
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 (4.34 KB)


nmsinc
User

Dec 31, 2011, 7:29 AM

Post #5 of 7 (1160 views)
Shortcut
Re: [Tom P] GeoCoder Map Pins [In reply to] Can't Post
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
Attachments: list.php (12.4 KB)


Jason
Staff / Moderator


Dec 31, 2011, 9:52 AM

Post #6 of 7 (1154 views)
Shortcut
Re: [nmsinc] GeoCoder Map Pins [In reply to] Can't Post
Hi,

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

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 - Programmer 
interactivetools.com

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


nmsinc
User

Dec 31, 2011, 10:56 AM

Post #7 of 7 (1150 views)
Shortcut
Re: [Jason] GeoCoder Map Pins [In reply to] Can't Post
Hi Jason,

Worked perfect - thanks for your help!