CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user3055639
user3055639

Reputation: 69

How to get latitude and Longitude based in Textbox value

How to get the Latitude and Longitude depending on the value inserted in a Textbox.

In order to show some Pin in the same map.

The value on Textbox will be populated based on user location so who enter in my site will display in the map if he want to share the location

I want that when a user specify the Latitude and Longitude in a Textbox that Pin to be displayed in map. Currently this is not working now with the below script. Is not getting the value from the textbox.

Value Latitude:

<input type="text" name="val-lat" value="User Latitude" />

Value Longitude:

<input type="text" name="val-lng" value="User Longitude" />

Below script i use:

$(document).ready(function() {

    //------- Google Maps ---------//

    // Creating a LatLng object containing the coordinate for the center of the map
    var latlng = new google.maps.LatLng('val-lat', 'val-lng');

    // Creating an object literal containing the properties we want to pass to the map  
    var options = {  
        zoom: 15, // This number can be set to define the initial zoom level of the map
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
    };  
    // Calling the constructor, thereby initializing the map  
    var map = new google.maps.Map(document.getElementById('map_div'), options);  

    // Define Marker properties
    var image = new google.maps.MarkerImage('images/marker.png',
        // This marker is 129 pixels wide by 42 pixels tall.
        new google.maps.Size(129, 42),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 18,42.
        new google.maps.Point(18, 42)
    );

    // Add Marker
    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng('val-lat', 'val-lng'), 
        map: map,       
        icon: image // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker1, 'click', function() {  
        infowindow1.open(map, marker1);  
    });

    // Add information window
    var infowindow1 = new google.maps.InfoWindow({  
        content:  createInfo('Evoluted New Media', 'Ground Floor,<br />35 Lambert Street,<br />Sheffield,<br />South Yorkshire,<br />S3 7BH<br /><a href="http://www.evoluted.net" title="Click to view our website">Our Website</a>')
    }); 

    // Create information window
    function createInfo(title, content) {
        return '<div class="infowindow"><strong>'+ title +'</strong><br />'+content+'</div>';
    } 

});

Upvotes: 0

Views: 4603

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22490

Problem here is that you don't get the input values. Try this:

<input id="userLat" type="text" name="val-lat" value="User Latitude" />
<input id="userLng" type="text" name="val-lng" value="User Longitude" />

Then 

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

var latlng = new google.maps.LatLng(lat, lng);

Upvotes: 2

Related Questions