Hello Reader's ,
Hope you are doing good today.

Today in my blog, I am going to explain how you can show store on google map Locator using database record.
In this tutorial we are using database table for getting a lat long through google api using an address then show store on the locator.

Create "stores" table in your database.

CREATE TABLE IF NOT EXISTS  `stores` (
    id smallint(20) not null auto_increment,
    store_name varchar(100) not null,
    address varchar(150) NOT NULL,
    city varchar(100) NOT NULL,
    state varchar(100) NOT NULL,
    country varchar(100) NOT NULL,
    zip varchar(30) NOT NULL,
    email varchar(100) NOT NULL,
    phone varchar(50) NOT NULL,
    created datetime not null,
    modified datetime not null,
    primary key (id)
);

//Put some data into the table.

INSERT INTO stores(store_name,address,city,state,country,zip,email,phone,created) VALUES ('PUMA Store','F 011, First Floor, Pacific Mall, Jakhan','Dehradun','Uttarakhand','India','248006','puma@xyz.com','0136598744',NOW());
INSERT INTO stores(store_name,address,city,state,country,zip,email,phone,created) VALUES ('Levis Store','Pacific Mall ','Dehradun','Uttarakhand','India','248001','levis@xyz.com.com','01236547852',NOW());
INSERT INTO stores(store_name,address,city,state,country,zip,email,phone,created) VALUES ('Reebok Store','65C, Rajpur Rd','Dehradun','Uttarakhand','India','248001','reebok@xyz.com.com','01352746588',NOW());

Now create the "address.php" file in your directory and fetch data from database.Change db password and databse name acording to your db setting.

$mysqli = new mysqli('localhost', 'root', 'password', 'database'); // Change db password and databse name acording to your db setting
if ($mysqli->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

Put is togather

include "address.php" file in "office-static-ds2.js" library. 

<?php
	$out=fopen("php://output",'w');
	$first=true;
	
	//connection  with database 	
	$mysqli = new mysqli('localhost', 'root', 'password', 'database'); // Change db password and databse name acording to your db setting
	if ($mysqli->connect_error) {
	    die("Connection failed: " . $conn->connect_error);
	} 

	$sql = "select * from stores";
	$result = $mysqli->query($sql);
	$fields=array();
	$addfield=array();
	if (!empty($result))
    {
        while($row = mysqli_fetch_assoc($result))
        {       
			    
        	/************Lat Lng address********************/
        	$address = urlencode($row['address'].' '. $row['city'] .' '. $row['state'].' '.$row['country'].' '.$row['zip']);
        	
        	$url = "http://maps.google.com/maps/api/geocode/json?address={$address}";
		 
			// get the json response
			$resp_json = file_get_contents($url);

			$resp = json_decode($resp_json, true);

			if($resp['status']=='OK'){

				// get the important data
				$lati = $resp['results'][0]['geometry']['location']['lat'];
				$longi = $resp['results'][0]['geometry']['location']['lng'];
				$formatted_address = $resp['results'][0]['formatted_address'];

				if($lati && $longi && $formatted_address){
				 
							// put the data in the array
							$data_arr = array();            
							 
							array_push(
								$data_arr, 
									$lati, 
									$longi, 
									$formatted_address							
								);
							$row['Xcoord']=$data_arr[0];
							$row['Ycoord']=$data_arr[1];
							$row['address']=$data_arr[2];											
						}
						else{
							return false;
						}
			}
			else{
				return false;
			}
			/************enf Lat Lng address********************/
            if($first){
        		$k=array_keys($row);     
        		$v= '"'.implode('","',$k).''."\n";
        		echo $v;
        		//fputcsv($out,$v);
        		$first=false;	
        	}      
        	$v1= '"'.implode('","',$row).''."\n"; 
        	echo $v1;
           // fputcsv($out,$v1);
        }
    }

After completing above task now create "store.html" file where you can show locator with store address.
Before doing this you need to create google API key here - "https://developers.google.com/maps/documentation/javascript/get-api-key"
and put it in blow script URL after key param.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=Your google Api KEY"></script>

store.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Store Locator</title>
    <script
      src="https://maps.googleapis.com/maps/api/js?libraries=places&key=Your google Api KEY"></script>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
    </script>
    <script src="js/store-locator.min.js"></script>
    <script src="office-static-ds2.js"></script>
    <script src="custom.js"></script>
    <link rel="stylesheet" href="css/storelocator.css">
    <style>
      body { font-family: sans-serif; }
      #map-canvas, #panel { height: 500px; }
      #panel { width: 300px; float: left; margin-right: 10px; }
      #panel .feature-filter label { width: 130px; }
      p.attribution, p.attribution a { color: #666; }
      .store .hours { color: grey; }
    </style>
  </head>
  <body>
    <h1>Store Locator</h1>
    <div id="panel"></div>
    <div id="map-canvas"></div>    
  </body>
</html>

In the above html file we used "store-locator.min.js" google library. You can download the complete code below.

I hope this will help you. Please feel free to give us your feedback in comments.