Getting Latitude and Longitude of a place in Google Maps 3



Getting Latitude and Longitude of a place in Google Maps 3
Well if you have read my post on integrating Google maps 3 in website. Then I have put a link to this post. There in the post we need the latitude and longitude of the place for the map to show the location we want. But in that post we had no idea from where we can get the latitude and longitude. We just integrated Google Maps in with the an arbitrary latitude and longitude. Now, here in this post we are going to find the latitude and longitude of the address we want to use. This will have a field to enter the place to search, and the other two fields will show the latitude and longitude of the address found.

The full working code snippet of getting latitude and longitude of a place in Google maps is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Get Latitude and Longitude from Google Maps 3</title>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
Address:
<input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">
<br>
            latitude:<input name="latitude" class="MapLat" value="" type="text" placeholder="Latitude" style="width: 161px;" disabled>
            longitude:<input name="longitude" class="MapLon" value="" type="text" placeholder="Longitude" style="width: 161px;" disabled>
    <div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>



<script>
     $(function () {
         var lat = 44.88623409320778,
             lng = -87.86480712897173,
             latlng = new google.maps.LatLng(lat, lng),
             image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
         //zoomControl: true,
         //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
         var mapOptions = {
             center: new google.maps.LatLng(lat, lng),
             zoom: 13,
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             panControl: true,
             panControlOptions: {
                 position: google.maps.ControlPosition.TOP_RIGHT
             },
             zoomControl: true,
             zoomControlOptions: {
                 style: google.maps.ZoomControlStyle.LARGE,
                 position: google.maps.ControlPosition.TOP_left
             }
         },
         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
             marker = new google.maps.Marker({
                 position: latlng,
                 map: map,
                 icon: image
             });
         var input = document.getElementById('searchTextField');
         var autocomplete = new google.maps.places.Autocomplete(input, {
             types: ["geocode"]
         });
         autocomplete.bindTo('bounds', map);
         var infowindow = new google.maps.InfoWindow();
         google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
             infowindow.close();
             var place = autocomplete.getPlace();
             if (place.geometry.viewport) {
                 map.fitBounds(place.geometry.viewport);
             } else {
                 map.setCenter(place.geometry.location);
                 map.setZoom(17);
             }
             moveMarker(place.name, place.geometry.location);
             $('.MapLat').val(place.geometry.location.lat());
             $('.MapLon').val(place.geometry.location.lng());
         });
         google.maps.event.addListener(map, 'click', function (event) {
             $('.MapLat').val(event.latLng.lat());
             $('.MapLon').val(event.latLng.lng());
             infowindow.close();
                     var geocoder = new google.maps.Geocoder();
                     geocoder.geocode({
                         "latLng":event.latLng
                     }, function (results, status) {
                         console.log(results, status);
                         if (status == google.maps.GeocoderStatus.OK) {
                             console.log(results);
                             var lat = results[0].geometry.location.lat(),
                                 lng = results[0].geometry.location.lng(),
                                 placeName = results[0].address_components[0].long_name,
                                 latlng = new google.maps.LatLng(lat, lng);
                             moveMarker(placeName, latlng);
                             $("#searchTextField").val(results[0].formatted_address);
                         }
                     });
         });
     
         function moveMarker(placeName, latlng) {
             marker.setIcon(image);
             marker.setPosition(latlng);
             infowindow.setContent(placeName);
             //infowindow.open(map, marker);
         }
     });
</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Automate file upload in Selenium IDE

Image
Selenium IDE is an integrated development environment for Selenium tests. It records your interactions with websites to help you generate and maintain site automation, tests, and remove the need to manually step through repetitive tasks. Selenium IDE can be installed in Google Chrome from  here . For Firefox visit this  link . File upload in Selenium IDE cannot be automated simply by recording from the IDE. Because when we select the file input field, the dialog that opens up is a system window which cannot be controlled by Selenium IDE. Therefore, clicking the input file field to select a file will not work. Also the selected file path is changed to C:\fakepath\filename.extension. So to fix this issue, we need to configure the browser to support file upload and then instead of clicking the input field we set the file using ‘type’ selenium command which is shown below. First, to support file upload in Selenium IDE, configure your browser to support file upload: Visit ‘...
Read more

How To Install and Configure Nextcloud

Image
  Original post: https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-nextcloud-on-ubuntu-20-04 Step 1 – Installing Nextcloud We will be installing Nextcloud using the  Snap  packaging system. This packaging system, available on Ubuntu 20.04 by default, allows organizations to ship software, along with all associated dependencies and configuration, in a self-contained unit with automatic updates. This means that instead of installing and configuring a web and database server and then configuring the Nextcloud app to run on it, we can install the  snap  package which handles the underlying systems automatically. To download the Nextcloud snap package and install it on the system, type: sudo snap install nextcloud Copy The Nextcloud package will be downloaded and installed on your server. You can confirm that the installation process was successful by listing the changes associated with the snap: snap changes nextcloud Copy Output I...
Read more

Bruteforce a router to hack admin password using Hydra

Image
Hydra can be used for bruteforce attack on a router to retrieve admin's password. For this, a password list needs to be created for my case it is password.lst. The username I am using in the bruteforce attack is admin and the router's password is 192.168.1.19 which might differ for your case. The command is as follows that I used: hydra -l admin -P password.lst 192.168.1.19 http-get -m / The above image shows a screenshot of my attack used on my TP-LINK router. The found password is underlined by red underline.
Read more