CODEWITHSUNDEEP
javascripthtmlgoogle-maps
Dhana Lakshmi
Dhana Lakshmi

Reputation: 413

How to get latitude longitude value from html form to google map

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

    <script>
        function ShowMap(latitude,longitude) {
            console.log("This is latitude :" + latitude);
            console.log("This is longitude :" + longitude);

            var myCenter = new google.maps.LatLng(latitude, longitude);
            var marker;

            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,
                    animation: google.maps.Animation.BOUNCE
                });

                marker.setMap(map);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        }


    </script>
</head>

I have the related data in header of the html

In the body of the html I have a form 

 <form>
        <input type="number" name="latitude" >
        <input type="number" name="longitude" >

        <input type="button" onclick="ShowMap(latitude.value,longitude.value)" value="ShowMap"/>
    </form>

which take latitude and longitude has the input to which the graph as to be plotted but, now I am getting the values in the function graph is not displayed is there something wrong i am doing

Upvotes: 1

Views: 2098

Answers (2)

user5408654
user5408654

Reputation:

please try this one:

function ShowMap(latitude, longitude) {
    console.log("This is latitude :" + latitude);
    console.log("This is longitude :" + longitude);

    var myCenter = new google.maps.LatLng(latitude, longitude);
    var marker;

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

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

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

        marker.setMap(map);
    }

    initialize();

DEMO HERE

Upvotes: 0

geocodezip
geocodezip

Reputation: 161404

You need to call the initialize routine directly, this won't work:

google.maps.event.addDomListener(window, 'load', initialize);

As the window load event has already fired.

working fiddle

code snippet:

function ShowMap(latitude, longitude) {
  console.log("This is latitude :" + latitude);
  console.log("This is longitude :" + longitude);

  var myCenter = new google.maps.LatLng(latitude, longitude);
  var marker;

  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,
      animation: google.maps.Animation.BOUNCE,
      title: myCenter.toUrlValue(6)
    });

    marker.setMap(map);
  }

  initialize();
}
html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<form>
  <input type="number" name="latitude" value="42" />
  <input type="number" name="longitude" value="-72" />
  <input type="button" onclick="ShowMap(latitude.value,longitude.value)" value="ShowMap" />
</form>
<div id="googleMap"></div>

Upvotes: 1

Related Questions