How to make dynamic maps for website and show directions from current location to destination automatically and change marker icon

How-to-make-dynamic-maps-for-website-and-show-directions-from-current-location-to-destination-automatically-and-change-marker-icon

How to make dynamic maps for website and show directions from current location to destination automatically and change marker icon

Step 1. Make a database for Location .

CREATE TABLE `map` (
  `lat` text NOT NULL,
  `log` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `map` (`lat`, `log`) VALUES
('32.0426525', '75.373396');

Step 2. Make  index.php File .

<?php
$conn=mysqli_connect("localhost","root","","map");
if(!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM map ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:60%;height:800px;"></div>
<script>
        function detectBrowser() {
            var useragent = navigator.userAgent;
            var mapdiv = document.getElementById("map");
            if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
                mapdiv.style.width = '100%';
                mapdiv.style.height = '100%';
            } else {
                mapdiv.style.width = '600px';
                mapdiv.style.height = '800px';
            }
        }
        var myLatLng;
        var latit;
        var longit;
        function geoSuccess(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer;
            myLatLng = {
                lat: latitude,
                lng: longitude
            };
            var mapProp = {
               
                zoom: 15,
                mapTypeId: 'roadmap',
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer;
            
            directionsDisplay.setMap(map);
            var bounds = new google.maps.LatLngBounds();
                  var mapOptions = {
                       mapTypeId: 'roadmap'
                   };
          
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'My location',
                icon: 'map-marker-2-xxl.png'
             
            });
            var markers = [
                
                ['BHAGAUTI.COM', <?php echo $row['lat']; ?>,<?php echo $row['log']; ?>],
                ['my current location', latitude, longitude],

            ];
           
            var infoWindowContent = [
                
                ['<div class="info_content">' +
                    '<h3>BHAGAUTI.COM</h3>' +
                    '<p>Gurdaspur Punjab</p>' +
                    '</div>'
                ]
                
            ];
           
          

            var infoWindow = new google.maps.InfoWindow(),
                marker, i;
           
            for (i = 0; i < markers.length; i++) {
                var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: markers[i][0],
                    icon: 'map-marker-2-xxl.png'
                     

                    
              });
               
                        infoWindow.setContent(infoWindowContent[i][0]);
                        infoWindow.open(map, marker);
                        latit = marker.getPosition().lat();
                        longit = marker.getPosition().lng();
                       
               
             
                    directionsService.route({
                        
                        origin: myLatLng,
                       
                        destination: {
                            lat: latit,
                            lng: longit
                        },
                        travelMode: 'DRIVING'
                    }, function(response, status) {
                        if (status === 'OK') {
                            directionsDisplay.setDirections(response);
                        } else {
                            window.alert('Directions request failed due to ' + status);
                        }
                    });
                
                
                map.fitBounds(bounds);
            }
        }
        
        function geoError() {
            alert("Geocoder failed.");
        }
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
                // alert("Geolocation is supported by this browser.");
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }

    </script>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCV1X2S4lFck2D5NAdfDZnxATO5-lEbA8Y&callback=getLocation"></script>
</body>
</html>

 

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy