getProjection().fromLatLngToPoint don't work as expect

serj

unread,

Aug 27, 2010, 6:24:35 AM8/27/10

to Google Maps JavaScript API v3

I want to convert Lat/Lng to view point and I don't understand what is
wrong with this code:

thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#map {
width: 800px;
height: 600px;
}

#latlng-control {
background: #ffc;
position: absolute;
top:100px;
left:100px;
width:150px;
height:40px;
}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
function init() {
var centerLatLng = new
google.maps.LatLng(37.748582,-122.418411);
map = new google.maps.Map(document.getElementById('map'), {
'zoom': 10,
'center': centerLatLng,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
registerListener();
}

function registerListener(){
google.maps.event.addListener(map, 'mousemove',
function(mEvent) {
var point =
map.getProjection().fromLatLngToPoint(mEvent.latLng);
var elem = document.getElementById('latlng-control');
elem.innerHTML = point.x+"<br>"+point.y;
});
}

google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
<div id="latlng-control"></div>
</body>
</html>

dario

unread,

Aug 27, 2010, 7:56:12 AM8/27/10

to Google Maps JavaScript API v3

I guess you want to obtain the coordinates of the pixel of the
viewport under the pointer.
The problem is that method fromLatLngToPoint returns the point in
"world coordinates".
To obtain the pixel you need to translate the point with respect to
the origin of the viewport (the upper left corner), and then scale
with respect to the zoom level of the map. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/

html;charset=ISO-8859-1">

var point = convertPoint(mEvent.latLng);

var elem = document.getElementById('latlng-control');
elem.innerHTML = point.x+"<br>"+point.y;
});
}

function convertPoint(latLng) {
var
topRight=map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
var
bottomLeft=map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
var scale=Math.pow(2,map.getZoom());
var worldPoint=map.getProjection().fromLatLngToPoint(latLng);
return new google.maps.Point((worldPoint.x-
bottomLeft.x)*scale,(worldPoint.y-topRight.y)*scale);

}

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

</head>
<body>
<div id="map">
</div>
<div id="latlng-control">
</div>
</body>
</html>

Ciao.

serj

unread,

Aug 27, 2010, 8:04:16 AM8/27/10

to Google Maps JavaScript API v3

thanks for answer

I also found this code seems ok:

on init method:
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

on convertPoint method:
var point =
overlay.getProjection().fromLatLngToContainerPixel(mEvent.latLng);

Reply all

Reply to author

Forward

Message has been deleted