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.
<html>
<head>
<?php
include 'YOURDATABASECONFIGFILE';
$sql = "SELECT Title, Address, City, State, Zip, lattitude, longitude
FROM GoogleMaps";
$result = $db->query($sql);
?>
<title>Database Driven Google Maps Example</title>
<link rel="icon" href="../favicon.ico">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-=" crossorigin="anonymous"></script>
</head>
<body style="padding:0;margin:0;">
<div class="map" id="map" style="width:100%;height:100%;">
</div>
<script>
var map;
var geocoder;
var locations = [
<?php while($row = $result->fetch_assoc()) {?>
['<?php echo addslashes($row["Address"]).'<br>'.addslashes($row["City"]).', '.addslashes($row["State"]).' '.addslashes($row["Zip"]);?>', '<?php echo addslashes($row["Title"]).'<br>';?>',<?php echo $row["lattitude"];?>,<?php echo $row["longitude"];?>],
<?php } ?>
];
var zoom = 5;
function initMap() {
var image = new google.maps.MarkerImage("images/map-marker.png", null, null, null, new google.maps.Size(25, 30));
var infowindow = new google.maps.InfoWindow();
if (window.matchMedia("(max-width: 768px)").matches) {
zoom = 3;
console.log('updated');
}
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.5500507, lng: -100.78206740000002},
zoom: zoom,
disableDefaultUI: true,
styles: [{
"featureType": "all",
"elementType": "geometry",
"stylers": [{"color": "#63b5e5"}]
}, {
"featureType": "all",
"elementType": "geometry.fill",
"stylers": [{"saturation": "0"}, {"lightness": "0"}, {"color": "#fbae16"}]
}, {
"featureType": "all",
"elementType": "geometry.stroke",
"stylers": [{"visibility": "off"}, {"hue": "#ff0000"}]
}, {
"featureType": "all",
"elementType": "labels",
"stylers": [{"visibility": "simplified"}]
}, {
"featureType": "all",
"elementType": "labels.text",
"stylers": [{"color": "#ff0000"}]
}, {
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{"gamma": 0.01}, {"lightness": 20}, {"color": "#b05500"}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{"saturation": -31}, {"lightness": -33}, {"weight": 2}, {"gamma": 0.8}, {"visibility": "simplified"}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{"visibility": "on"}, {"hue": "#ff7b00"}, {"lightness": "0"}, {"gamma": "0.75"}, {"weight": "1"}]
}, {
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [{"visibility": "off"}]
}, {
"featureType": "administrative.country",
"elementType": "labels.icon",
"stylers": [{"visibility": "off"}]
}, {
"featureType": "administrative.province",
"elementType": "labels.text",
"stylers": [{"visibility": "off"}]
}, {
"featureType": "administrative.locality",
"elementType": "labels.text",
"stylers": [{"visibility": "simplified"}]
}, {
"featureType": "administrative.locality",
"elementType": "labels.icon",
"stylers": [{"visibility": "simplified"}, {"color": "#b06f00"}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{"lightness": 30}, {"saturation": 30}]
}, {
"featureType": "landscape.natural.terrain",
"elementType": "labels",
"stylers": [{"visibility": "on"}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{"saturation": 20}, {"color": "#ffa421"}]
}, {
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [{"color": "#ffa421"}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{"visibility": "simplified"}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{"lightness": 20}, {"saturation": -20}, {"color": "#ffa421"}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{"lightness": 10}, {"saturation": -30}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{"saturation": 25}, {"lightness": 25}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{"visibility": "off"}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{"lightness": -20}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{"visibility": "on"}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{"color": "#f77702"}]
}, {
"featureType": "water",
"elementType": "geometry.stroke",
"stylers": [{"visibility": "on"}]
}, {
"featureType": "water",
"elementType": "labels.text",
"stylers": [{"visibility": "off"}]
}, {"featureType": "water", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]}]
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
codeAddress(geocoder, map, locations[i]);
}
var infowindow = new google.maps.InfoWindow();
function codeAddress(geocoder, map, address) {
var myLatLng = {lat: address[2], lng: address[3]};
var marker = new google.maps.Marker({
map: map,
position: myLatLng,
icon: image,
id: address[1],
infoWindowContent: address[1],
infoWindowSpan: address[0]
});
marker.addListener('mouseover', function () {
infowindow.setContent('<div class="info-window"><div class="co">' + marker.infoWindowContent + '<span>' + marker.infoWindowSpan + '</span></div><div class="info-slant"></div></div>');
infowindow.open(map, marker);
var iw_container = $(".gm-style-iw").parent();
iw_container.stop().hide();
iw_container.fadeIn(1000);
});
marker.addListener('mouseout', function () {
infowindow.close();
});
google.maps.event.addListener(marker, 'click', function () {
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEAPIKEY&callback=initMap" async defer></script>
</body>
</html>
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
[templatera id=”8000″]
