How to Customize a Google Map Custom Markers in PHP, In this tutorial, I’m going to show you how we can add a marker on the google map with Mysql Data we have. adding a custom marker on the map layer will be useful to show custom information with iconic representation as per the user interest. For example, if the user wants to mark census data then the custom markers can be used instead of the default map markers to show the variations in the population strength. I’m taking latitude and longitude in Mysql table and these data with a mark on the google map.
Google Map, Custom Markers in PHP
Table of Contents
Get an API key
Follow these steps to get an API key:
- Go to the Google API Console.
- Create or select a project.
- Click Continue to enable the API and any related services.
- On the Credentials page, get an API key.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
Create Map Display Area/Page
Here’s the code for map layout:
<html>
<body onload="initMap()">
<div onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map" style="height: 100%; width: 100%; color:#000;"></div>
</div>
</body>
</html>
This code will generate the map layout for user view, In this code, we use initMap() function for calling the map attribute.
Create initMap() Function
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
addMarker(A, B, '<b>Location A</b>');
addMarker(C, D, '<b>Location B</b>');
addMarker(E, F, '<b>Location C</b>');
center = bounds.getCenter();
map.fitBounds(bounds);
}
In this piece of code, we define the latitude and longitude with the remark like location name.
addMarker(A, B, '<b>Location A</b>'); addMarker(C, D, '<b>Location B</b>'); addMarker(E, F, '<b>Location C</b>');
Here, first attribute A, C, E are Latitude and B, D, F are Logitutdes. Another attribute is Location or additional comment that you want to display with a marker when a user clicks on the marker they with find information about that particular location. So here I’m defining Location A, Location B, and Location C.
Above code is for static location, I’m going to describe PHP code for put MySQL for dynamic result
Fetch Dynamic Data from MySQL
<?php
$query = mysqli_query($conn,"SELECT * FROM example")or die(mysql_error());
while($row = mysqli_fetch_array($query))
{
$location= $row['location'];
$lat = $row['lat'];
$lon = $row['long'];
echo("addMarker($lat, $lon, '<b>$location</b>');\n");
}
?>
This piece of code replace with above code and your dynamic data from MySQL database is set to displaying the result.
Create Table For Latitude and Longitude
For PHP code we have to create Database and table for Data where we have to create a table with the column Location, Lat, and Long
CREATE TABLE `example` ( `id` int(11) NOT NULL AUTO_INCREMENT, `location` varchar(100) NOT NULL, `lat` varchar(100) NOT NULL, `long` varchar(100) NOT NULL, PRIMARY KEY (`id`) )
Create Database Connection
This file helps to connect and select the database.
<?php
$conn=mysqli_connect("localhost","root","","location") or die("Unable to connect Database");
?>
location is the name of the database
Result
You can Also Check
Google Charts in PHP with MySQL Database using Google API
https://www.techjunkgigs.com/google-charts-in-php-with-mysql-database-using-google-api/
I hope this tutorial helped you to learn How to Customize a Google Map Custom Markers in PHP and MySQL. To get the latest news and updates follow us on twitter & facebook, subscribe to our YouTube channel. If you have any query then please let us know by using comment.