Geocoder: Display photo of houses on google maps markers

4 posts by 2 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: June 26, 2015   (RSS)

By noahtheark - June 18, 2015

I am trying to make the correct house pictures show up on the google maps marker when clicked.

The code I was using is below, I made a upload field for the listing where you had to upload a small picture of the house to make it show up in the map.

<div align="left"><?php echo $record['gmappicture']; ?></div>

The attached picture shows more detail of what I was doing.

What I would like to do, is use the first picture in the uploads field for each of the houses listed with a thumbnail size of 150x150 pixels in the google maps markers, instead of using the gmappicture upload field, which should be possible.

Then I tried this code in place of the one above, but it keeps showing the same house in each of the google map markers.

<div align="center"><img src="<?php echo $upload['urlPath'] ?>" width="150" height="150" border="1" alt="<?php echo $upload['info1'] ?>" /></div>

http://www.333rent.com/gmaptest.php

Here is the code of site.

<script type="text/javascript" src="code/over.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map_canvas';
  var mapOptions  = { center: new google.maps.LatLng(39.0319389, -94.5304009),
          zoom: 10, 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']}, '" .escapeJs($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;
      }
    });
  }
}

</script>

<?php $hasAddresses = array_filter(array_pluck($myRecords, 'latitude')); ?>
  <?php if ($hasAddresses): ?>
    <div id="map_canvas"></div>
  <?php endif ?>

  <?php if (!$hasAddresses): ?>
    <div id="map_canvas"></div>
  <?php endif ?>
 
  <div id="marker_details" style="display: none;">
    <?php foreach ($myRecords as $record): ?>

      <?php // marker_infowindow_### is the content displayed in the info-window on click ?>
      <div id="marker_infowindow_<?php echo $record['num']; ?>">
    <table cellspacing="0" cellpadding="0" border="0" width="250" height="175">
<tr>
    <td valign="top">
        <img src="img/nien.gif" width="250" height="1" alt="">
        <div align="center"><strong><font size="+1"><?php echo htmlspecialchars( @$record['address']); ?></font></strong></div><br />
        <div align="left"><?php echo $record['summary']; ?></div>
        <div align="center"><img src="<?php echo $upload['urlPath'] ?>" width="150" height="150" border="1" alt="<?php echo $upload['info1'] ?>" /></div>    
        <div align="center">&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $record['bedrooms']; ?> x Bed&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $record['bathrooms']; ?> x Bath&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div align="center"><a href="<?php echo $record['_link']; ?>"><strong>VIEW PROPERTY</strong></a></div>
    
    </td>
</tr>
</table>
</div>
<?php endforeach ?>

Thank you for your help

Attachments:

maps.jpg 287K

By noahtheark - June 25, 2015

The code works!

Thank you for helping me with my code, the team here is really good at helping out the users, and I appreiate your time and knowledge.

I am still learning Php and have made allot of improvements but as you can see I am still learning.
Any tips on learning more about php, sites or books you used to learn?

Thanks again.

By gregThomas - June 26, 2015

Thanks noahtheark. 

I really like the head first books for learning new languages:

http://www.amazon.com/Head-First-MySQL-Lynn-Beighley/dp/0596006306/

I've not actually read the PHP/MySQL one (but I've read Head First Java) and I really liked the style and the way it covered topics. 

Although I've not used it, I've heard good things about code academy:

http://www.codecademy.com/

Finally, if you're planning to use CMS Builder for a few projects, I'd recommend subscribing to the CMSB cook book:

http://thecmsbcookbook.com/

This is a resource that's been created by Jerry (a forum regular), and gives code examples for creating lots of different projects in CMS Builder.

Cheers,

Greg

Greg Thomas







PHP Programmer - interactivetools.com