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"> <?php echo $record['bedrooms']; ?> x Bed <?php echo $record['bathrooms']; ?> x Bath </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