• Home
  • PHP
  • Embed Google Map with several locations (GeoCode addresses and display “info window” for each marker)

Embed Google Map with several locations (GeoCode addresses and display “info window” for each marker)

1. Include javascript at the top of the page. It will create a map, get a string of addresses and their respective “project names” and “amount of images” from a form that we fill during the database fetching process (see Step #3 below).

The script will then geocode each address (get latitude and longitude) and place a marker on the map. By clicking on the marker you will get an “info-window” (in our example – with project name and the amount of photos for each project). We specify the image for the marker as well.

2. We then have to make sure to load the script above automatically on page load by specifying:

3. Then goes our “while” loop for fetching database data and placing it into hidden input fields:

with html below:

4. Have the placeholder for the map somewhere on the page:

Tags: , , , , ,

Trackback from your site.

Leave a comment