Как пройти Широта долготы из формы HTML в Google Maps

Я хочу передать широту и долготу от пользователя. Как я могу передавать параметры из html-формы в API карты google? Как узнать полный API карты Google шаг за шагом, который начинается до конца. и как добавить более одного лата и lng на одну карту?Как пройти Широта долготы из формы HTML в Google Maps

<!DOCTYPE html> 
    <html> 
    <head> 
    <script 
    src="http://maps.googleapis.com/maps/api/js"> 
    </script> 

    <script> 
    var lat=51.508742; 
    var lng=8.120850; 
    var myCenter=new google.maps.LatLng(lat,lng); 

    function initialize() 
    { 
    var mapProp = { 
     center:myCenter, 
     zoom:5, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var marker=new google.maps.Marker({ 
     position:myCenter, 
     }); 

    marker.setMap(map); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 

    <body> 
<form id="form1"> 
    <table> 
     <tr> 
      <td>Enter Latitude:</td> 
      <td> 
       <input type="text" name="lat" value="13.053147716796578" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Enter Longitude:</td> 
      <td> 
       <input type="text" name="lng" value="80.2501953125" /> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <input type="button" value="Submit" /> 
      </td> 
     </tr> 
    </table> 
    <div id="googleMap" style="width:500px;height:380px;"></div> 
</form> 

    </body> 
    </html>

источник

2015-03-02 Muhammad Sohaib Roomi

Я уверен, что документация и обучающие программы Google должен объяснить это. Вы там посмотрели? – RudolphEst

Дайте идентификаторы элементов, как:

<input type="text" id="lat" name="lat" value="13.053147716796578" />

Просто используйте Javascript, чтобы получить значения:

var lat=document.getElementById('lat').value; 
var lng=document.getElementById('lng').value;

источник

2015-03-02 16:40:58 bobdye

Его не работает дорогой. Должен ли я создать любую функцию для получения значений и использовать их в функции карты? –

Вам не обязательно это делать. Можете ли вы показать свои новые Javascript и HTML с изменениями? – bobdye

–

Используйте google.maps.event.addDomListener слушать форме представить событие.
Дайте вашим полям ввода лат и lng идентификатор, чтобы вы могли идентифицировать их.
Создайте маркер из значений формы (и/или центрируйте карту по местоположению).

Вы также хотите подтвердить ввод пользователя. Вы должны проверить, что пользователь вводил числа и что они являются действительными значениями lat и lng.

Дополнительная информация here о том, как подтвердить значение широты на проекции меркатора.

Вот полный и рабочий пример, чтобы достичь того, чего вы хотите:

HTML

<form id="mapCenterForm"> 
    Lat: <input type="text" id="lat" /> 
    <br /> 
    Lng: <input type="text" id="lng" /> 
    <br /> 
    <input type="submit" value="Center map" /> 
</form> 
<br /> 
<div id="map-canvas"></div>

JavaScript

// Calculate maximum latitude value on mercator projection 
var maxLat = Math.atan(Math.sinh(Math.PI)) * 180/Math.PI; 

function initialize() { 

    var center = new google.maps.LatLng(0, 0); 

    var mapOptions = { 
     zoom: 3, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    // DOM event listener for the center map form submit 
    google.maps.event.addDomListener(document.getElementById('mapCenterForm'), 'submit', function(e) { 

     e.preventDefault(); 

     // Get lat and lng values from input fields 
     var lat = document.getElementById('lat').value; 
     var lng = document.getElementById('lng').value; 

     // Validate user input as numbers 
     lat = (!isNumber(lat) ? 0 : lat); 
     lng = (!isNumber(lng) ? 0 : lng); 

     // Validate user input as valid lat/lng values 
     lat = latRange(lat); 
     lng = lngRange(lng); 

     // Replace input values 
     document.getElementById('lat').value = lat; 
     document.getElementById('lng').value = lng; 

     // Create LatLng object 
     var mapCenter = new google.maps.LatLng(lat, lng); 

     new google.maps.Marker({ 

      position: mapCenter, 
      title: 'Marker title', 
      map: map 
     }); 

     // Center map 
     map.setCenter(mapCenter); 
    }); 
} 

function isNumber(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 

function latRange(n) { 
    return Math.min(Math.max(parseInt(n), -maxLat), maxLat); 
} 

function lngRange(n) { 
    return Math.min(Math.max(parseInt(n), -180), 180); 
} 

initialize();

Demo

JSFiddle demo

источник

2015-03-05 07:58:16 MrUpsidown

Как пройти Широта долготы из формы HTML в Google Maps

ответ

Смежные вопросы