Google Map With Overlay That MOVES!

[jogoeire]

Hi There,
I have a client that is looking for something very specific. He wants customers of his to be able to enter their address in google maps and when the map comes up an overlay showing price zones (circles) appears around the customers address.

I have seen maps with zones overlayed like this:

maps.google.com/maps/ms?ie=UTF8&oe=UTF8&msa=0&msid=102166252758200377906.0004509c6df85dbfec8d1

However I want my overlays to move around... depending on what the address of the customer is!

Is it possible to do this on Google Maps? And if so where would I get hold of a developer?

Thanks community! Robert

 

[php.allstar]

Hi robert,

Here's something I developed which shows a map of UK Golf Courses For A Particular area...

Map of UK Golf Courses | teetimes.co.uk

If you click the search by post code tab and enter "NG31 3PN" as the post code and select any distance you will see a static overlay.

If you then click on one of the map markers either in the horizontal list or on the map itself, you will get another type of overlay that when opens also "pans" the map so the map icon is centered on screen.

See the attached image for a sample.

I could create something similar for you using php and jquery. Let me know.

 

[Tim Hammond]

Message for Php allstar

Hi, your teetimes map app looks great. I have been trying to do this for a client on with plotting their offices on a googlemap and allowing customers to search and see which offices cover their area. I can get the circles drawn on the map based on the locations I put in but I haven;t been able to make them user controlled with search boxes so they can add their area and see just those offices (like you have done with golf courses).
Are you interested in helping me finish this app off ?
thanks
Tim

 

[edfollett]

Hi

I know this thread is very old but i love the interface you have made for the teetimes website.

I was wondering if you could contact me about how I could go about acquiring the code from you? I would love to use it in a project I am working in.

PM me and we can discuss

Thanks

Ed

 

[php.allstar]

Hi,

I was working for the company that own the teetimes.co.uk website at the time I created the map interface, so as a result, it's their property and I can't sell the code on to you.

The bread and butter of this, the Google Maps API, EWindow Map Overlay and Google Maps Circle Overlay are all publically available. I just wrote a php class and a small bit of jquery to faciliate the user interaction.

I'm not sure what level you're at with your coding but here's a summary of what was done:

• When the user submits the form, a reverse geocode is done based on the user's postcode to get the latitude and longitude values.
• The map is centered to this location.
• Depending on the distance the user specified, the map is set to an appropriate scale.
• A lookup is performed on the company web service to find all courses within x miles of the postcode.
• An array of google map markers is populated with the relevant course data (lat, long, info-window html, icon)
• The markers are plotted onto the map
• The map markers array is also used to populate a div holding the html card (above the map) for each course.
• A cirlce is drawn on the map with the CirlceOverlay script, based on the distance specified by the user (gives radius)
• When a user clicks on a map marker, a new eWindow opens up which essentially just replaces the boring google info window with one you have styled yourself.
• When a user clicks on a map marker, the google map pans to center on that marker.
• A google map trigger event is assigened to each html card (above the map), clicking on one of these simulates a user having clicked on a map marker, so the appropriate ewindow is opened.
• When the eWindow is closed, the map pans back to the original position.

Thats it in a nutshell, nothing an intermediate web developer couldn't handle! Good luck.