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