Henrique Barcelos Henrique Barcelos - 3 months ago 18
Javascript Question

How to display 2 coordinates in one textfield (Google Maps API)?

In Google Maps API docs, I found this solution to get a user marked location, but it displays two inputs, each one with Latitude and Longitude. How can I join them in a single input, separated with comas, like (-10.0000, 10.0000)?

// global "map" variable
var map = null;
var marker = null;

// popup window for pin, if in use
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});

// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {

var contentString = html;

var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});

google.maps.event.trigger(marker, 'click');
return marker;


}


function initialize() {

// the location of the initial pin
var myLatlng = new google.maps.LatLng(-19.919131, -43.938637);

// create the map
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}


map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



// establish the initial marker/pin
var image = 'https://2.bp.blogspot.com/-37LrWPYLhrw/V8ByzCkQP2I/AAAAAAAAACM/7hKqzoGlX98p5RcBz2Z9u7XwY2goDKsMgCLcB/s64/Marcador-BikeSpot.png';
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title:"Property Location"
});

// establish the initial div form fields
formlat = document.getElementById("latbox").value = myLatlng.lat();
formlng = document.getElementById("lngbox").value = myLatlng.lng();

// close popup window
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

// removing old markers/pins
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (marker) {
marker.setMap(null);
marker = null;
}

// Information for popup window if you so chose to have one
/*
marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
*/

var image = 'https://2.bp.blogspot.com/-37LrWPYLhrw/V8ByzCkQP2I/AAAAAAAAACM/7hKqzoGlX98p5RcBz2Z9u7XwY2goDKsMgCLcB/s64/Marcador-BikeSpot.png';
var myLatLng = event.latLng ;
/*
var marker = new google.maps.Marker({
by removing the 'var' subsquent pin placement removes the old pin icon
*/
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title:"Bicicletario",

});



// populate the form fields with lat & lng
formlat = document.getElementById("latbox").value = event.latLng.lat();
formlng = document.getElementById("lngbox").value = event.latLng.lng();

});

}


enter image description here

Answer

Instead of

// populate the form fields with lat & lng 
        formlat = document.getElementById("latbox").value = event.latLng.lat();
        formlng = document.getElementById("lngbox").value = event.latLng.lng();

You can use

// populate the form fields with lat & lng 
   formlat = event.latLng.lat();
   formlng = event.latLng.lng();
   document.getElementById("latlngbox").value  = formlat +","+formlng

OR

// populate the form fields with lat & lng 
   formlat = event.latLng.lat();
   formlng = event.latLng.lng();
   document.getElementById("latlngbox").value = event.latLng.toUrlValue()

You can create a separate input box called latlngbox or populate the value into one of the existing text boxes and hide the other one.

In the initialize method change code to following :

// establish the initial div form fields
    formlat = myLatlng.lat();
    formlng = myLatlng.lng();
    document.getElementById("latlngbox").value = myLatlng.toUrlValue();
Comments