javascript - How to display latitude longitude of google maps api marker in html text box

I have added a google map to my site that has a draggable marker. However I would like to display the latitude and longitude of the marker location in a text box below the google map as in this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
".dtd">
<html xmlns="">
<head>
<script src="?         file=api&amp;v=2&amp;key=examplekey"
                      type="text/javascript">
        </script>   
</head>
<body>

</h2><table>
<tr>
<td>
<div id="map" style="WIDTH: 700px; HEIGHT: 500px"><div></td></tr><tr><td>
<form action=".php" method="post">
Lat/Long:..........<input type="text" name="grid" id="grid"><br>
</form>
</td></tr></table>
<p>
</p>
<script type="text/javascript"> 

var map
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//map.centerAndZoom(new GPoint(-2.3, 49.35), 8);
map.setCenter(new GLatLng(49.461,-2.58),12);
map.enableDoubleClickZoom();

var icon = new GIcon();
var point=new GLatLng(49.461,-2.58);
var marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true}); 
map.addOverlay(marker);
marker.enableDragging();
GEvent.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});

</script>
</body>
</html>

I see that the connection between the marker and the text box is the id value

GEvent.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});

and

<form action=".php" method="post">
Lat/Long:..........<input type="text" name="grid" id="grid"><br>
</form>

but when I copy this in to my own code it doesn't work:

<!DOCTYPE html>
<html>
<head>

<!--LOADING THE GOOGLE MAP APPLICATON PROGRAMMING INTERFACE--> 
<script src=";sensor=false">
</script>

<script>
// DEFINING NEW VARIABLE "MYCENTER"
var myCenter=new google.maps.LatLng(49.716,-2.196);

function initialize()
{
// DEFINING MAP PROPERTIES NOTICE CENTER USES PREDEFINED "MYCENTER"
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.HYBRID
};

//DEFINING NEW VARIABLE "MAP," A GOOGLE MAP BASED ON "MAPPROP"
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

// DEFINING NEW VARIABLE "MARKER" A DRAGGABLE MARKER POSITIONED AT "MYCENTER" 
var marker=new google.maps.Marker({
position:myCenter,
draggable:true,
});

// PLACES THE MARKER ON THE GOOGLE MAP
marker.setMap(map);
}

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

google.maps.event.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});

</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

<form>
Lat/Long:<input type= "text" name = "gridbox" id = "grid"><br>
</form>

</body>
</html>

I notice the event code is "GEvent" in the example and "google.maps.event" in my own, which makes me think they are from two different versions of google maps api...

I would appreciate it if someone could show me the correct coding or point me in the right direction.

Note : I have deleted the API keys from the example and my own code. You'll have to insert your own to see what it looks like.

Thanks for reading!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<script src="http://maps.google./maps?         file=api&amp;v=2&amp;key=examplekey"
                      type="text/javascript">
        </script>   
</head>
<body>

</h2><table>
<tr>
<td>
<div id="map" style="WIDTH: 700px; HEIGHT: 500px"><div></td></tr><tr><td>
<form action="http://formtoemailremote./user_forms.php" method="post">
Lat/Long:..........<input type="text" name="grid" id="grid"><br>
</form>
</td></tr></table>
<p>
</p>
<script type="text/javascript"> 

var map
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//map.centerAndZoom(new GPoint(-2.3, 49.35), 8);
map.setCenter(new GLatLng(49.461,-2.58),12);
map.enableDoubleClickZoom();

var icon = new GIcon();
var point=new GLatLng(49.461,-2.58);
var marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true}); 
map.addOverlay(marker);
marker.enableDragging();
GEvent.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});

</script>
</body>
</html>

I see that the connection between the marker and the text box is the id value

GEvent.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});

and

<form action="http://formtoemailremote./user_forms.php" method="post">
Lat/Long:..........<input type="text" name="grid" id="grid"><br>
</form>

but when I copy this in to my own code it doesn't work:

<!DOCTYPE html>
<html>
<head>

<!--LOADING THE GOOGLE MAP APPLICATON PROGRAMMING INTERFACE--> 
<script src="http://maps.googleapis./maps/api/js?key=insertkey&sensor=false">
</script>

<script>
// DEFINING NEW VARIABLE "MYCENTER"
var myCenter=new google.maps.LatLng(49.716,-2.196);

function initialize()
{
// DEFINING MAP PROPERTIES NOTICE CENTER USES PREDEFINED "MYCENTER"
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.HYBRID
};

//DEFINING NEW VARIABLE "MAP," A GOOGLE MAP BASED ON "MAPPROP"
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

// DEFINING NEW VARIABLE "MARKER" A DRAGGABLE MARKER POSITIONED AT "MYCENTER" 
var marker=new google.maps.Marker({
position:myCenter,
draggable:true,
});

// PLACES THE MARKER ON THE GOOGLE MAP
marker.setMap(map);
}

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

google.maps.event.addListener(marker, "drag", function(){
document.getElementById("grid").value=marker.getPoint().toUrlValue();});

</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

<form>
Lat/Long:<input type= "text" name = "gridbox" id = "grid"><br>
</form>

</body>
</html>

I notice the event code is "GEvent" in the example and "google.maps.event" in my own, which makes me think they are from two different versions of google maps api...

I would appreciate it if someone could show me the correct coding or point me in the right direction.

Note : I have deleted the API keys from the example and my own code. You'll have to insert your own to see what it looks like.

Thanks for reading!

Share Improve this question edited Dec 7, 2013 at 20:20 Kara 6,22616 gold badges53 silver badges58 bronze badges asked Sep 5, 2013 at 15:19 user2751145 131 gold badge1 silver badge5 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

Okay, here is a working example you can copy / paste.

Remember to include a correct

<script type="text/javascript" src="http://maps.googleapis.co ...

replace your code with this :

<script>
var myCenter=new google.maps.LatLng(49.716,-2.196);
var marker;

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

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

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

    marker.setMap(map);

    google.maps.event.addListener(marker, "drag", function(){
        document.getElementById("grid").value=marker.position.toUrlValue();
    });
}

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

that all there is to it.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745176317a4615209.html

javascript - How to display latitude longitude of google maps api marker in html text box - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to display latitude longitude of google maps api marker in html text box - Stack Overflow

1 Answer 1

相关推荐