Saturday, 16 November 2013

Google maps draggable marker , latitude longitude from address

copy paste below code and run the application -  :)

<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var geocoder;
        var map;
        var markersArray = [];
        var marker;
        var infowindow = new google.maps.InfoWindow();

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var myOptions = {
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            codeAddress();

            google.maps.event.addListener(map, 'click', function (event) {
                placeMarker(event.latLng);
            });

            google.maps.event.addListener(marker, 'drag', function (event) {
                document.getElementById("divLatitude").innerHTML = event.latLng.lat();
                document.getElementById("divLongitude").innerHTML = event.latLng.lng();
                placeMarkerOP(event.latLng);
            });

            google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById("divLatitude").innerHTML = event.latLng.lat();
                document.getElementById("divLongitude").innerHTML = event.latLng.lng();
                placeMarkerOP(event.latLng);
            });
        }

        function codeAddress() {
            var address = document.getElementById("address").value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    clearOverlays();

                    document.getElementById("address").value = results[0]['formatted_address'];
                    document.getElementById("divLatitude").innerHTML = results[0].geometry.location.ob;
                    document.getElementById("divLongitude").innerHTML = results[0].geometry.location.pb;
                  
                    map.setCenter(results[0].geometry.location);
                    marker = new google.maps.Marker({
                        map: map,
                        title: results[0]['formatted_address'],
                        position: results[0].geometry.location,
                        animation: google.maps.Animation.DROP
                    });

                    infowindow.setContent(results[1].formatted_address);
                    infowindow.open(map, marker);

                    markersArray.push(marker);

                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

        function placeMarker(location) {

            geocoder.geocode({ 'latLng': location }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        clearOverlays();

                        document.getElementById("address").value = results[1].formatted_address;
                        document.getElementById("divLatitude").innerHTML = results[0].geometry.location.ob;
                        document.getElementById("divLongitude").innerHTML = results[0].geometry.location.pb;

                        marker = new google.maps.Marker({
                            position: location,
                            title: results[1].formatted_address,
                            map: map,
                            draggable: true,
                            animation: google.maps.Animation.DROP
                        });
                        infowindow.setContent(results[1].formatted_address);
                        infowindow.open(map, marker);

                        markersArray.push(marker);

                        google.maps.event.addListener(marker, 'click', toggleBounce);

                        google.maps.event.addListener(marker, 'drag', function (event) {
                            document.getElementById("divLatitude").innerHTML = event.latLng.lat();
                            document.getElementById("divLongitude").innerHTML = event.latLng.lng();

                            placeMarkerOP(event.latLng);
                        });

                        google.maps.event.addListener(marker, 'dragend', function (event) {
                            document.getElementById("divLatitude").innerHTML = event.latLng.lat();
                            document.getElementById("divLongitude").innerHTML = event.latLng.lng();

                            placeMarkerOP(event.latLng);
                        });

                        map.setCenter(location);

                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }


        function placeMarkerOP(location) {
            geocoder.geocode({ 'latLng': location }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        document.getElementById("address").value = results[1].formatted_address;
                        infowindow.setContent(results[1].formatted_address);
                    }
                }
            });
        }



        function clearOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }

        function toggleBounce() {

            if (marker.getAnimation() != null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }
       
    </script>
</head>

<body onload="initialize()" >
    <table width="800px" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center">
                <h3>Latitude : <div id="divLatitude" name="divLatitude"></div> </h3>
                <h3>Longitute : <div id="divLongitude" name="divLongitude"></div></h3>
                <p><textarea id="address" rows="2" >Paota, Jodhpur,Rajasthan, India</textarea><input type="button" value="Show" onclick="codeAddress()"></p>
            </td>
        </tr>
        <tr>
            <td>
                <div id="map_canvas" style="height:500px; width:100%;" >
                </div>
            </td>
        </tr>
    </table>
</body>

</html>


Hope this help you !


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)