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&amp;v=2&amp;sensor=false&amp;key=YOURAPI&amp;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)

Re: [Toledoh] Google Maps integration via jQuery

By gadefgaertgqe - November 17, 2010 - edited: November 22, 2010

Hi Tim,

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: [Pixels & Beats] Google Maps integration via jQuery

By gadefgaertgqe - November 22, 2010

Just a heads up to people. Both Toledoh and I, have encountered the same problem with gmaps.

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

By gadefgaertgqe - November 22, 2010

Maurice: Sorry but can't make out the example on the site due to language barrier (Dutch?) :(

Paul

Re: [Pixels & Beats] Google Maps integration via jQuery

By Chris - November 22, 2010

Hi Paul,

Can you post a URL to a page which is not showing all your markers?
All the best,
Chris

Re: [chris] Google Maps integration via jQuery

By gadefgaertgqe - November 22, 2010 - edited: November 22, 2010

Hi Chris!!

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

It seems to me that the break occurs when you pass 30 items;

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

Tim (toledoh.com.au)

Re: [Toledoh] Google Maps integration via jQuery

By Chris - November 22, 2010

Hi folks,

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?
All the best,
Chris

Re: [chris] Google Maps integration via jQuery

By Toledoh - November 22, 2010

Hi Chris,

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

Tim (toledoh.com.au)