发表新帖
发表新帖

Update Google map by latitude and longitude form

后端 未结
关注
4 1675
小鲜肉
小鲜肉 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)
 看不清?
提交回复
热议问题