Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Show Store On google map Locator in PHP using mysql?

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 3.34k
    Comment on it

    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.

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: