Search code examples
phpjquerygoogle-mapsjquery-mobilejquery-mobile-ajax

Use own map like Google map. Collect and process data when visitors click spots on map


I am doing a website project related with travel. I think a long time, searching on the web for a long time. However I still have no idea how to get started. I really need help.

A brief description of my travel project first.

I need to use my own map. It can be zoomed in or zoomed out like Google Map. On the map there are many scenery spots, like spot A, spot B, spot C, etc....

When visitors open the map, click on the spots, for example, spot Y, spot A, spot M, etc.... I need to get which spots they clicked on, group all data, and finally write the data into MySQL database.

Here's what I find up to now:

I find many jQuery plugins and tools, like OpenLayers, mapTiler, mapBox, etc.. They all use Google Map, Open Street Map, and other maps, but not allow to use own map.

I also find Gmap Image Cutter which can cut my large map into tiles and display on the web. However the map cannot be clicked on get the data as required.

My questions:

I can master PHP and jQuery.

Could someone give me some idea how to get started?

Which tool or plugins can best accomplish my projects?

Thanks


Solution

  • The Google Maps JavaScript API provides an OverlayView class for creating your own custom overlays.

    Link to doc: https://developers.google.com/maps/documentation/javascript/customoverlays#subclass

    Link to example: https://developers.google.com/maps/documentation/javascript/examples/overlay-hideshow

    And last, but not least, Google Maps can be embedded into your website: https://developers.google.com/maps/documentation/embed/