Google Maps integration via jQuery
18 posts by 4 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: November 30, 2010 (RSS)
By Toledoh - November 4, 2010
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.html
Install:
- 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>Tim (toledoh.com.au)
Re: [Toledoh] Google Maps integration via jQuery
By gadefgaertgqe - November 17, 2010 - edited: November 22, 2010
I will also use this solution to dynamically generate maps for 150 motorcycle showrooms based on postcode.
It's great to see others using it and kind of re-assuring that the methods used are very similar!
Thanks for sharing :)
Paul
Re: [Toledoh] Google Maps integration via jQuery
By Maurice - November 17, 2010
google maps and google street view managed from cmsb
http://www.funon.nl/projecten/project/?Kopieerservice-De-Boemerang-9
Greetz
Dropmonkey.nl
Re: [Pixels & Beats] Google Maps integration via jQuery
Not all markers show up and it always seems to be a random selection that do show.
Investigating right now ...... *scratches head*
Paul
Re: [Maurice] Google Maps integration via jQuery
Paul
Re: [Pixels & Beats] Google Maps integration via jQuery
By Chris - November 22, 2010
Can you post a URL to a page which is not showing all your markers?
Chris
Re: [chris] Google Maps integration via jQuery
By gadefgaertgqe - November 22, 2010 - edited: November 22, 2010
It's not a CMSB thing. All data is being presented to the javascript and actually shows up in the rendered HTML.
Toledoh and I are talking to each other right now and there are still ideas-a-plenty to try :)
However, feel free to check it out, nothing likr having a guru on board:
http://test.sachsbikes.co.uk/dealers.php
Thanks for your interest :)
If we make any progress I will share it here.
Kind Regards
Paul
Edit: I have removed some delay code and other bits so the file is now in it's true broken state lol. It should be showing 57 or so dealers.
Re: [Pixels & Beats] Google Maps integration via jQuery
By Toledoh - November 22, 2010
http://d1008284.my.ozhosting.com/resultsMap.php seems fine, however http://www.ragatzdeanconsulting.com/index2.php displays differently each time you regresh the page - even though the code is correct and stays the same.
Tim (toledoh.com.au)
Re: [Toledoh] Google Maps integration via jQuery
By Chris - November 22, 2010
I noticed that you're both using a jquery extension called gMap. Have you tested things without gMap to see if it might be causing the issue?
Chris
Re: [chris] Google Maps integration via jQuery
By Toledoh - November 22, 2010
Yep, that is the issue, and the reason Paul was saying that it's not a CMSB thing.
It seems that the records are being listed correctly, but the extension starts acting eratically once you display too many records.
Tim (toledoh.com.au)