Add multiple pin on Google Maps (marker) is a powerful feature if you’re building a location-based application. This tutorial will explain how to use the Google Maps JavaScript API, including retrieving location data from the database.
Create database and PHP backend
Use MySQLI database to store location details like (name, latitude, longitude and state). The following PHP code will fetch these details dynamically:
$conn=mysqli_connect("localhost","root","","location_db");
if(!$conn)
{
die("Connection Failed"). mysqli_connect_error()
}
$sql = "SELECT id, name, latitude, longitude, state FROM googlemap WHERE name != ''";
$result = mysqli_query($conn, $sql);
$franchiselocated = [];
while ($row = mysqli_fetch_array($result)) {
$franchiselocated[] = [
'name' => $row['name'],
'latitude' => $row['latitude'],
'longitude' => $row['longitude'],
'state' => $row['state']
];
}
mysqli_close($conn);
Database Connection and Data Fetching
- The script connects to a MySQL database where database name is (
location_db) and retrieves location data from thegooglemaptable. - Only records with non-blank names are included in the map display if blank is found, so it will show a warning message please select state.
Dynamic Google Maps Display
- The
Google Maps JavaScript APIpowers interactive maps embedded in web pages. - By default, the map is centered on India’s geographical coordinates (
lat: 20.5937,lng: 78.9629) and uses a zoom level of 5.
State-Based Filtering
- A dropdown menu allows users to select any specific state.
- Upon selection, the map dynamically filters and displays markers only for coding tutorial franchises located in the selected state.
Add Google map Script with Api
Add the Google Maps API script to your HTML file:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpyqzwG0e43ddk8sNj6yxOz1bOzZsKYXY&libraries=places"></script>
Dynamically add markers to the map
Here’s how to create a map and dynamically add multiple pins:
<?php
$conn = mysqli_connect("localhost", "root", "", "location_db");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT id, name, latitude, longitude, state FROM googlemap WHERE name != ''";
$result = mysqli_query($conn, $sql);
$franchiselocated = [];
while ($row = mysqli_fetch_array($result)) {
$franchiselocated[] = [
'name' => $row['name'],
'latitude' => $row['latitude'],
'longitude' => $row['longitude'],
'state' => $row['state']
];
}
$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Franchise Locations</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpyqzwG0e43ddk8sNj6yxOz1bOzZsKYXY&libraries=places"></script>
<style>
#map {
height: 500px;
width: 100%;
}
body{
background-color: yellowgreen;
}
select
{
width: 200px;
height: 45px;
border-radius: 2px;
}
h1{
color: white;
}
</style>
</head>
<body>
<center>
<h1>Coding Tutorial Locations</h1>
<select onchange="Myfunction()" id="selectstate">
<option value="">Select State</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
</select>
</center>
<div id="map"></div>
<script>
var map;
var markers = [];
function Myfunction() {
var selectstate = document.getElementById("selectstate").value;
var mapset = {
center: { lat: 20.5937, lng: 78.9629 },
zoom: 5
};
map = new google.maps.Map(document.getElementById('map'), mapset);
markers.forEach(function(marker) {
marker.setMap(null);
});
var locations = <?php echo json_encode($franchiselocated); ?>;
var filteredLocations = locations.filter(function(location) {
return location.state === selectstate;
});
filteredLocations.forEach(function(location) {
var marker = new google.maps.Marker({
position: { lat: parseFloat(location.latitude), lng: parseFloat(location.longitude) },
map: map,
title: location.name
});
var infoWindow = new google.maps.InfoWindow({
content: location.name
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
markers.push(marker);
});
if (filteredLocations.length > 0) {
var bounds = new google.maps.LatLngBounds();
filteredLocations.forEach(function(location) {
bounds.extend(new google.maps.LatLng(location.latitude, location.longitude));
});
map.fitBounds(bounds);
} else {
alert("No franchise locations found for the selected state.");
}
}
google.maps.event.addDomListener(window, 'load', Myfunction);
</script>
</body>
</html>
Features of this implementation
- Dynamically Data Fetching: Locations are fetch from the database and added dynamically.
- State-Based Filtering: Users can select a state from a selection box to a filter pin.
- Interactive Map: Clicking on a pin displays additional information about the location like location name.
- Responsive Zoom: Map automatically adjusts zoom based on visible pins.
Benefits of This Google Map pin Application
- Interactive User Experience: Users can visually locate franchise locations on a map.
- Dynamic Data Filtering: State-based data filtering allows users to quickly narrow down locations of interest.
- Easy expandability: Developers can easily add more features, such as searching by city and additional filtering criteria.
- The
Google Maps JavaScript APIpowers interactive maps embedded in web pages. - By default, the map is centered on India’s geographical coordinates (
lat: 20.5937,lng: 78.9629) and uses a zoom level of 5.
Google map multi pin locator Source code
Send download link to:
