Advertisement
apl-mhd

map update 2

Sep 17th, 2018
428
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.45 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <title>Google Map</title>
  4.         <meta name="viewport" content="initial-scale=1.0">
  5.         <meta charset="utf-8">
  6.         <style>          
  7.           #map {
  8.             height: 300px;    
  9.             width: 600px;            
  10.           }          
  11.         </style>        
  12.     </head>    
  13.     <body>
  14.         <div id="latclicked"></div>
  15.         <div id="longclicked"></div>
  16.        
  17.         <div id="latmoved"></div>
  18.         <div id="longmoved"></div>
  19.        
  20.         <div style="padding:10px">
  21.             <div id="map"></div>
  22.         </div>
  23.  
  24.  
  25.         <form>
  26.  
  27.             <input type="text" id="Lati" name="" value="" disabled="">
  28.         </form>
  29.  
  30. <p id="p"></p>
  31.    
  32.         <script type="text/javascript">
  33.  
  34.         var map;
  35.        
  36.         function initMap() {                            
  37.             var latitude = 23.746466; // YOUR LATITUDE VALUE
  38.             var longitude = 90.376015; // YOUR LONGITUDE VALUE
  39.            
  40.             var myLatLng = {lat: latitude, lng: longitude};
  41.            
  42.             map = new google.maps.Map(document.getElementById('map'), {
  43.               center: myLatLng,
  44.               zoom: 14,
  45.               disableDoubleClickZoom: true, // disable the default map zoom on double click
  46.             });
  47.            
  48.             // Update lat/long value of div when anywhere in the map is clicked    
  49.             google.maps.event.addListener(map,'click',function(event) {                
  50.                 document.getElementById('latclicked').innerHTML = event.latLng.lat();
  51.                 document.getElementById('longclicked').innerHTML =  event.latLng.lng();
  52.             });
  53.            
  54.             /* Update lat/long value of div when you move the mouse over the map
  55.             google.maps.event.addListener(map,'mousemove',function(event) {
  56.                 document.getElementById('latmoved').innerHTML = event.latLng.lat();
  57.                 document.getElementById('longmoved').innerHTML = event.latLng.lng();
  58.             });*/
  59.                    
  60.            
  61.            
  62.            
  63.      
  64.         }
  65.         </script>
  66.  
  67.  
  68.         <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAo2WSeqOcNthSSbkEU1Y4mb3BHyfHpn8g&callback=initMap"
  69.        async defer>
  70.            
  71.            
  72.  
  73.         </script>
  74.  
  75.    
  76.  
  77.         <script type="text/javascript">
  78.             document.getElementById("Lati").value="aakdgn"
  79.         </script>
  80.  
  81.  
  82.  
  83.     </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement