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 gregThomas - June 25, 2015

Hi  noahtheark,

The issue is that the $upload variable is not being set inside of the foreach loop. You need adjust your code so that the upload variable gets set with the image details inside the foreach loop so that it gets changed for each image. I think you code will need to look something like this:

<?php foreach ($myRecords as $record): ?>
  <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">
            <?php if($upload = @$record['uploads'][0]): ?>
              <img src="<?php echo $upload['urlPath'] ?>" width="150" height="150" border="1" alt="<?php echo $upload['info1'] ?>" /></div>   
            <?php endif; ?> 
          <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 ?>

The code above is example code, so you might need to make a few changes to get it working correctly (for example I'm not sure if your upload field is called uploads). 

It works by trying to set the first image in the uploads field to the upload variable, and then displaying the image if it's successful.

Cheers,

Greg

Greg Thomas







PHP Programmer - interactivetools.com

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