Using the Google Maps API you can generate a map with markers and on click or hover show an information tooltip.  Here’s an example of how to accomplish this.

First you’ll need your data inserted into a SQL table, we’re using mySQL in this example.

Our table layout is the following:

CREATE TABLE `GoogleMaps` (
  `ID` int(11) NOT NULL,
  `Title` text NOT NULL,
  `Address` text NOT NULL,
  `City` text NOT NULL,
  `State` text NOT NULL,
  `Zip` int(11) NOT NULL,
  `lattitude` int(11) NOT NULL,
  `longitude` int(11) NOT NULL,
  `CreateDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `GoogleMaps`
  ADD PRIMARY KEY (`ID`);

ALTER TABLE `GoogleMaps`
  MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Next we’ll need to setup a PHP file to pull the data set and display it on the Google Map as markers.

You’ll need to fill out your config file for the database connection, integrity key for including jQuery and your Google Maps API Key.

To get your Google Maps API key go here: https://cloud.google.com/maps-platform/

You’ll notice in the example here the map is also styled, we’ve done this using Snazzy Maps which is a great resource for styling your maps away from the default Google Styling.  Check them out here: https://snazzymaps.com/

Check out the working example here: https://examples.prodjex.com/google/google-map-database.php

Leave a Reply