Display each users location in google map using address in PHP and Javascript

Reading Time: 2 minutes

Display each users locations in the google map after submitting his addresses using php and java script.This is displaying using location latitude and longitude.That is marked by red bubble.You can customize map types as ROADMAP,SATELLITE,HYBRID or TERRAIN, displaying controls….etc.

This is the html form.User submit his address using this form.

    Address : 
    City : 
    State : 
    Country : 
    Zip code : 
   

 

process.php file.This is generate map after submitting details.First it submit address details to the google map and get the response.It contains latitude and longitude of the given address.Then generate google map using this latitude and longitude.
Here is a process.php full page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<?php 
$address = trim(urlencode($_POST['address'])); 
$city = trim(urlencode($_POST['city'])); 
$state = trim(urlencode($_POST['state'])); 
$country = trim(urlencode($_POST['country'])); 
$zip = trim($_POST['zip']); 

$geocode = file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$add.',+'.$city.',+'.$state.',+'.$country.'&sensor=false'); 
$output = json_decode($geocode); //Store values in variable 
//print_r($output); 

if($output->status == 'OK'){ 
// Check if address is available or not 
        echo "<br/>";
    echo "Latitude : ".$latitude = $output->results[0]->geometry->location->lat; //Returns Latitude
    echo "<br/>";
    echo "Longitude : ".$longitude = $output->results[0]->geometry->location->lang; // Returns Longitude
}
else {
    echo "Sorry we can't find this location.Check the details again!";
}
?>
<script type="text/javascript">
$(document).ready(function () {
    // Define the latitude and longitude positions
    var latitude = parseFloat("<?php echo $latitude; ?>"); // Latitude get from above variable
    var longitude = parseFloat("<?php echo $longitude; ?>"); // Longitude from same
    var latlngPos = new google.maps.LatLng(latitude, longitude);

    // Set up options for the Google map
    var myOptions = {
        zoom: 14,
        center: latlngPos,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        }
    };

    // Define the map
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    // Add the marker
    var marker = new google.maps.Marker({
        position: latlngPos,
        map: map,
        title: "Your Location"
    });
});

</script>

<div id="map" style="width: 450px; height: 350px; margin: 20px auto 0;"></div>

 

The following map types are supported.

• ROADMAP displays the normal, default 2D tiles of Google Maps.
• SATELLITE displays photographic tiles.
• HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
• TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).

How to change map type

mapTypeId: google.maps.MapTypeId.ROADMAP replace ROADMAP your map type.
Example, display SATELLITE map, mapTypeId: google.maps.MapTypeId.SATELLITE

How to change map size.

change zoom: 14 to your value. (5 wide area displaying, 20-small area displaying by zooming)
View Demo

Download “Display each users location in google map using address in PHP and Java Script” Display-each-users-location-in-google-map-using-address.zip – Downloaded 415 times – 2.08 KB