Hi All,
Just thought I'd share my experience with a great Google Maps jQuery framework I've been playing with; You can see the implementation here:
http://d1008284.my.ozhosting.com/resultsMap.php- Search results shown via map
- Single Property shown on map (I plan to show nearby / related properties here also)
Get the source:
- Get it here:
http://gmap.nurtext.de/- Get your Google Maps API here:
http://code.google.com/intl/en-US/apis/maps/signup.htmlInstall:
- Add you list viewer code to the top of the page
- Add the following to <head> section;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOURAPI&hl=en"></script>
<script type="text/javascript" src="js/jquery.gmap-1.1.0-min.js"></script>
Add Div
- - Add <div id="map"></div> to your page
- - Style this div in you css file. NB. I’ve added the font color style so the HTML balloons show up properly.
#map{ width:1000px; height:500px; border:#FFFFFF 1px solid; color:#333333;}
To display the map and listings, play around with the following to suit;
- It’s very picky about spaces, so try and remove any extra.
- In the “markers”, you need to have the last item without the comma at the end, so I put the generated listings in the foreach loop, then finished with a hardcoded link to display a single item – in this case the location of the realestate agents office. I marked this separately with an icon.
- You could also add an if statement to the markers display a different icon depending on their category
- The map is then centered by the “address” section, which again I used as the clients office.
<script type="text/javascript">
$(function()
{
$("#map").gMap({
markers: [
<?php foreach ($listingsRecords as $record): ?>
{ address: "<?php echo $record['street_address'] ?><?php echo $record['suburb'] ?>",
html: "<?php echo $record['street_address'] ?><br><?php echo $record['title'] ?><br><a href='details.php?<?php echo $record['num'] ?>'>View Details</a>" },
<?php endforeach ?>
{ address: "460 Anzac Parade, Kingsford NSW 2032",
html: "Come in and see us!",
icon: { image: "images/gmap_pin.png",
iconsize: [26, 46],
iconanchor: [12, 46],
infowindowanchor: [12, 0] }
}],
address: "460 Anzac Parade, Kingsford NSW 2032",
zoom: 12 }
);
});
</script>
Cheers,
Tim (toledoh.com.au)