Integrating Google map in Websites Where users can Locate their places by a marker

When we create job websites,business directories.etc , situation will araise where we have to make users locate their Location inside a google map. In this modern era it has become an inevitable feautre where everyone uses google map for travelling & locating places.
So In this post I will try to explain how to include that in your php website.
Include this code in your header file :-
 <script type="text/javascript" src="map/jquery-1.4.4.min.js"></script>        
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBDvrqFePHOAvzk1bs2rsg309Pro20FhL0&sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="map/gmap3.js"></script> 
    <style>
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 500px;
      }
    </style>
    
    <script type="text/javascript">
      $(function(){
      
        $("#test").gmap3({
          marker:{
            latLng: [23.00,54.00],
            options:{
              draggable:true
            },
            events:{
              dragend: function(marker){
                $(this).gmap3({
                  getaddress:{
                    latLng:marker.getPosition(),
                    callback:function(results){
                      var map = $(this).gmap3("get"),
                        infowindow = $(this).gmap3({get:"infowindow"}),
                        content = results && results[1] ? results && results[1].formatted_address : "no address";
                      if (infowindow){
                        var lat = marker.getPosition().lat();
                        var lng = marker.getPosition().lng();

                        infowindow.open(map, marker);
                        infowindow.setContent(content+lat+lng);
                        var userdat=content+'&'+lat+'&'+lng;
                      $.post("getmapdata.php", {userdat: userdat}, function(data){
    alert("Google map Location successfully updated: "+data);
});
                      } else {
                        $(this).gmap3({
                          infowindow:{
                            anchor:marker, 
                            options:{content: content}

                          }
                        });
                      }
                    }
                  }
                });
              }
            }
          },
          map:{
            options:{
              zoom: 8
            }
          }
        });
        
      });
    </script>
Here in the above script we can see some included scripts. jquery-1.4.4.min.js can be downloaded from jquery.com site.
Second script included is directly from google source so we didn't have to worry about it.
Third script included is gmap3.js. We have to download it from http://gmap3.net/
Now we have done the basic settings, now it requires only to include map in our page.

<div class="map">
<div id="test" class="gmap3"></div>
   <p> Drag the marker to point to an address</p>
</div>

Now execute the page we can see the map coming in that area.
Now we have to do is to save the latitude ,longitude & location corresponding to the users dragging the mouse.Look at this portion of above code:-
var userdat=content+'&'+lat+'&'+lng;
                      $.post("getmapdata.php", {userdat: userdat}, function(data){
    alert("Google map Location successfully updated: "+data);

Here the data is saved in the getmapdata.php  php file. So our next step is to create that file:-
<?php
session_start();
include("db.php");
if(isset($_SESSION['user_uni'])){
$user=$_SESSION['user_uni'];
}
$fd=$_POST['userdat'];
$fdarr=explode('&',$fd);
$location=$fdarr[0];
$lat=$fdarr[1];
$long=$fdarr[2];
mysql_query("Update tblprofile set location='$location',latitude='$lat',longitude='$long' where login_id='$user'") or die('Error1:'.mysql_error());

?>
Here data will be saved in the table. I have used a demo code, change according to your project. So now  we will get a map similar to this:

Here In above map user have to drag that marker to their location and that location's latitude and longitude will be automatically saved into the database