Update Google map by latitude and longitude form

后端 未结 4 1685
小鲜肉
小鲜肉 2021-02-06 19:32

So I am building a HTML page, in which i need a Google Map and a simple form which consists of two fields latitude and longitude.




        
相关标签:
4条回答
  • 2021-02-06 20:00

    You can use api documentation of google maps

    https://developers.google.com/maps/documentation/javascript/reference#Map

    In your condition you should use set map method:

    <input type="button" onclick="map.setCenter(new google.maps.LatLng(-34.397, 150.644))" value="test"/>
    
    0 讨论(0)
  • 2021-02-06 20:01

    This is an elegant solution, moves the camera to the point.

    var myLatlng = new google.maps.LatLng(lat, lng);
    map.panTo(myLatlng);
    

    This jumps directly to the point.

    var myLatlng = new google.maps.LatLng(lat, lng);
    map.setCenter(myLatlng);
    
    0 讨论(0)
  • 2021-02-06 20:18
    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
      <script>
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
        }
    
        google.maps.event.addDomListener(window, 'load', initialize);
        function pan() {
            var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
            map.panTo(panPoint)
         }
    </script>
    </head>
    <body>
     <label>lat</label><input type="text" id="lat" />
    <br/>
      <label>lng</label><input type="text" id="lng" />
     <input type="button" value="updateCenter" onclick="pan()" />
    
    
     <div id="map-canvas"></div>
     </body>
    </html>
    
    0 讨论(0)
  • 2021-02-06 20:26

    For anyone who will come later, suppose you want to update your map latitudes and longitudes from an array(like in case you have a list of cities), you can try this:

    Globaly declare your variables and array

    var latlon;
    var map;
    var coords = {
    'agra': '27.1767, 78.0081',
    'noida': '28.5355, 77.3910',
    'kanpur':'26.4499, 80.3319',
    };
    

    Add a function that will work on your selects on change, so that when you change a city, the map automatically changes.

    function firemapChange(value)
    {
    var c = coords[value].split(',');
    var latlon = new google.maps.LatLng(c[0], c[1]);
    // map = new google.maps.Map(document.getElementById('mapdiv'), {
    //center: {lat: position.coords.latitude, lng: position.coords.longitude},
    // center: latlon,
    //  zoom: 13,
    //  mapTypeId: 'roadmap'
    map.panTo(latlon);
    }
    

    Why i have commented so many lines? It is because i was accidentally creating a new map object. Since my map also had a search box, the search box disappeared and all its functionality was lost. So, it is better to avoid creating a new map, and create a global variable

    finally in your HTML, you do something like this:

    <label style="font-size:11px;">City
    </label>
    </td>
    <td>
      <select size="auto" style="font-size:11px;" onChange="firemapChange(this.value)">
        <option value="select city" id="b1">Select City
        </option>
        <option value="noida" id="b1">Noida
        </option>
        <option value="agra" id="b1">Agra
        </option>
        <option value="kanpur" id="b1">Kanpur
        </option>
        </td> 
    </tr>
    
    0 讨论(0)
提交回复
热议问题