CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Muhammad Sohaib Roomi
Muhammad Sohaib Roomi

Reputation: 45

How to pass Latitude Longitude from HTML form to Google Maps

I want to pass latitude and longitude from user. How I can pass parameters from html form to google map API? How to learn complete google map API step by step which start to end. and how to add more then one lat and lng to one map?

  <!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>

Upvotes: 0

Views: 21622

Answers (2)

MrUpsidown
MrUpsidown

Reputation: 22490

  1. Use a google.maps.event.addDomListener to listen to the form submit event.
  2. Give your lat and lng input fields an ID so that you can identify them.
  3. Create a marker from the form values (and/or center the map on the location).

You also want to validate the user input. You should check that the user entered numbers and that they are valid lat and lng values.

More information here on how to validate the latitude value on a mercator projection.

Here is a complete and working example to achieve what you want:

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

Upvotes: 2

user488187
user488187

Reputation:

Give the elements IDs, like:

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

Just use Javascript to get the values:

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

Upvotes: 0

Related Questions