Google Maps, PHP, Javascript, and MySQL code - Single Page

This project was successfully completed by ckannen for £277 GBP in 14 days.

Get free quotes for a project like this
Employer working
Completed by:
Project Budget
£100 - £250 GBP
Completed In
14 days
Total Bids
Project Description


I am making an interactive ‘Fish of the World’ map for a TV Show Fan Site

Looking for someone who is experienced in GOOGLE MAPS/JavaScript to build a fairly simple map, linked to data within a MySQL database.

Before you can be considered for this project, please make sure you meet these prerequisites:

:: EXAMPLE of previous custom Google Map design, or similar projects
:: Good experience of applying custom CSS styles to Google Maps
:: Experience linking Google Maps with MySQL data
:: Must be able to give written explanation of how you will produce the code.

== Basic Project Description ==

I need producing an interactive map showing different fish species from across the world. The locations of the pins need to be powered by data stored within a MySQL table.

I will provide all the HTML, CSS, and any other graphical elements required... so you do not need to worry about any graphic design etc.

Here is an example of the structure of the MySQL table: [url removed, login to view]

== Screenshot examples ==

Take a look at the attached screenshot mock-ups. Please note these are just quick designs made in Photoshop… the final designs will be provided as HTML and CSS, and will look much better! However, the basic functionality will not change.

[url removed, login to view] - This screen shows all the map pins across the world (there will be about 200 pins in total)... the pins should appear as numbered ‘clusters’ if too many are in the same location (similar to this: [url removed, login to view])

...this screenshot also shows the ‘Search by Location’ tab, with all the fish presented in ‘groups’ linked by the same location, e.g. All the Australian fish linked together as a group, all the Indian fish linked together as a group. When clicking on a link, the map will zoom into the relevant pin and show the modal.

[url removed, login to view] - this shows an example of how the modal will look like… the modal should use custom CSS styles, not the GoogleMap default style. The pop-out will feature details as pulled from the database relevant to that fish.

[url removed, login to view] - this is the same as screenshot 1, but shows the fish listed in alphabetical order, grouped together by letter.


The interactive features of the map will be:


Each map pin will have a custom pin which features the picture of that fish (CSS will be provided)... the image will again be determined by MySQL data.

There will be about 200 pins in total… when pins are close to each other, the pins should ‘cluster’ in a similar style to this: [url removed, login to view]

When a user clicks on a pin, the map ZOOMS to that location. A CUSTOM STYLE modal pops up with the following information (as determined by the MySQL data):

:: Name of Fish
:: Location name
:: Image of fish
:: Text Description
:: Episode Number
:: Series Number
:: Link to an external page (page GET id listed)
:: Close Modal (custom design button)


The page will also feature two tabs.. one tab listing all fish by location, one tab listing all fish alphabetically (grouped by letter).

When the user clicks the fish in the tabs, the map zooms into that location and displays the pop-out modal with details relevant to that fish (in the same way a user would select a pin).

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online