admin管理员组

文章数量:1415476

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!

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

  • javascript
  • google-maps
  • google-maps-markers
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 user2751145user2751145 131 gold badge1 silver badge5 bronze badges
Add a ment  | 

1 Answer 1

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.

本文标签： javascriptHow to display latitude longitude of google maps api marker in html text boxStack Overflow

版权声明：本文标题：javascript - How to display latitude longitude of google maps api marker in html text box - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745176317a2646256.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。