Menu
I have implemented the Google map successfully. But one more thing has left to do. I need to retrieve the Longitude and Latitude data when the user clicks on the map (any co-ordinates). My entire code looks like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; function initialize() { var myLatlng = new google.maps.LatLng(<?=$decimalValueLon?>,<?=$decimalValueLat?>); var myOptions = { zoom: 17, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); // marker STARTS var marker = new google.maps.Marker({ position: myLatlng, title:"Click to view info!" }); marker.setMap(map); // marker ENDS // info-window STARTS var infowindow = new google.maps.InfoWindow({ content: "<div class='map_bg_logo'><span style='color:#1270a2;'><b><?=$row->bridge_name?></b> (<?=$row->bridge_no?>)</span><div style='border-top:1px dotted #ccc; height:1px; margin:5px 0;'></div><span style='color:#555;font-size:11px;'><b>Length: </b><?=$row->bridge_length?> meters</span></div>" }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); // info-window ENDS } google.maps.event.addDomListener(window, 'load', initialize); </script>` Thanks in advance !
663
Android Phone or Tablet If you're on an Android phone, you'll see the coordinates at the top of the screen. Open the Google Maps app and select and hold the location until you see a red pin. Look in the search box at the top of the screen to find the coordinates.
Above the onMapClicked event will be triggered on clicking on the map on any area to return the Object carrying latitude, longitude and other information. Now open the app.component.html file and add the following template HTML: The (mapClick) event will return the current coordinates on clicking on google map.
By dropping a pin and sharing it with yourself or others, you can get the latitude and longitude of a location with iPhone, iPad, Android, and desktop versions of Google maps. It's as simple as clicking or tapping on your location of interest! Download and open Google Maps.
1) Google Map is displayed using a latitude and longitude value. 2) Whenever there is any click on the map, a div is updated with latitude and longitude value of the clicked position. 3) When the mouse is moved over the map, another div is updated with latitude and longitude value of the position where the mouse is.
To right-click on a Mac, hold down Ctrl as you click on the mouse. Instead of dropping a pin, you can also right-click on the map location directly. Get your location's latitude and longitude. The coordinates will be located in a rectangular box that appears on the bottom of your computer screen.
You can add a click-handler like you have a load handler:
google.maps.event.addListener(map, "click", function (e) { //lat and lng is available in e object var latLng = e.latLng; }); 
<script> var map; function init_map() { var opts = { 'center': new google.maps.LatLng(35.567980458012094,51.4599609375), 'zoom': 5, 'mapTypeId': google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('mapdiv'), opts); google.maps.event.addListener(map,'click',function(event) { document.getElementById('latlongclicked').value = event.latLng.lat() document.getElementById('lotlongclicked').value = event.latLng.lng() }); google.maps.event.addListener(map,'mousemove',function(event) { document.getElementById('latspan').innerHTML = event.latLng.lat() document.getElementById('lngspan').innerHTML = event.latLng.lng() }); } google.maps.event.addDomListener(window, 'load', init_map); </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
