How To Update Map When Map Show Based On Longitude And Latitude I.e; Fetch From Database

Question

Solution 1:

I would like to suggest to make two pages:

In first page you fetch longitude, latitude from database and use iframe to call map page. e.g.

<?php/* Code to get latitude and longitude *//* store value in $lat and $lon */$map_url = "map_php.php?lon=$lon&lat=$lat";
?><divid="maps"class="tab-pane fade"><divclass="hpadding20"><iframesrc="<?=$map_url?>"align="center"name="mymap"scrolling="No"width="100%"height="500"style=""frameborder="0"></iframe></div></div>

In second page write code for map generating part. e.g.

<?php$lat = $_GET["lat"];
 $lon = $_GET["lon"];
?><!-- Placeholder for the Google Map --><divid="googleMap"style="width: 725px; height: 500px;"></div><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?    sensor=false"></script><script>var myCenter=new google.maps.LatLng('<?=$lat?>', '<?=$lon?>');
function initialize()
{
  var mapProp = {
   zoom: 16,
   center:myCenter,
    mapTypeId:google.maps.MapTypeId.ROADMAP
 };

 var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
   position:myCenter,
  });

marker.setMap(map);
}

 google.maps.event.addDomListener(window, 'load', initialize);
 </script>

Try it. I think it will work for you. Set map property and zoom level as per your requirement.

Solution 2:

I have replicated a script using the link you have provided, it will ask for your location when you first open the page, and when you drag/drop marker than it will put the latitude and longitudes to the input box

<!DOCTYPE html><htmllang="en"><head><scripttype="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script>var map, latLng, marker, infoWindow, ad;
        var geocoder = new google.maps.Geocoder();

        functionshowAddress(val) {
            infoWindow.close();
            geocoder.geocode({
                'address': val
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    marker.setPosition(results[0].geometry.location);
                    geocode(results[0].geometry.location);
                } else {
                    alert("Sorry but Google Maps could not find this location.");
                }
            });
        }

        functiongeocode(position) {
            geocoder.geocode({
                latLng: position
            }, function(responses) {
                var html = '';
                window.location.hash = '#' + marker.getPosition().lat() + "," + marker.getPosition().lng();
                if (responses && responses.length > 0) {

                    html += '<p>Address: ' + responses[0].formatted_address + ' </p>';
                }
                html += 'Latitude : ' + marker.getPosition().lat() + '<br/>Longitude: ' + marker.getPosition().lng();
                document.getElementById('lat1').value = marker.getPosition().lat();
                document.getElementById('lang1').value = marker.getPosition().lng();
                map.panTo(marker.getPosition());
                infoWindow.setContent("<div id='iw'>" + html + "</div>");
                infoWindow.open(map, marker);
            });
        }

        functioninitialize() {
            var myOptions = {
                zoom: 12,
                panControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
            var coordinates = window.location.hash;
            if (coordinates != "") {
                var hashlocation = coordinates.split(",");
                if (hashlocation.length == 2) {
                    showMap(hashlocation[0].substr(1), hashlocation[1], true);
                    return;
                }
            }
            if (navigator.geolocation) {
                defaultLocation();
                navigator.geolocation.getCurrentPosition(locationFound, defaultLocation);
            } else {
                defaultLocation();
            }
        }

        functionlocationFound(position) {
            showMap(position.coords.latitude, position.coords.longitude);
        }

        functiondefaultLocation() {
            showMap(38.8977, -77.0366);
        }

        functionshowMap(lat, lng, hideinfo) {
            latLng = new google.maps.LatLng(lat, lng);

            map.setCenter(latLng);
            marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });
            infoWindow = new google.maps.InfoWindow({
                content: '<div id="iw"><strong>Instructions:</strong><br /><br />Click and drag this red marker to spot exact location of your media.</div>'
            });
            if (hideinfo) {
                geocode(latLng);
            } else {
                infoWindow.open(map, marker);
            }
            google.maps.event.addListener(marker, 'dragstart', function(e) {
                infoWindow.close();
            });
            google.maps.event.addListener(marker, 'dragend', function(e) {
                var point = marker.getPosition();
                map.panTo(point);
                geocode(point);
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script><style>#googlemaps
        {
            height: 400px;
            width: 700px;
        }
    </style></head><body><labelfor="latitude"class="control-label col-xs-4">Latitude</label><inputid="lat1"value=""name="latitude"type="text"><labelfor="longitude"class="control-label col-xs-4">Longitude</label><inputid="lang1"value=""name="longitude"type="text"><divstyle="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"id="googlemaps"></div></body>

alvintranemory

How To Update Map When Map Show Based On Longitude And Latitude I.e; Fetch From Database

Solution 1:

Solution 2:

Post a Comment for "How To Update Map When Map Show Based On Longitude And Latitude I.e; Fetch From Database"

Widget HTML #3