Skip to content

Instantly share code, notes, and snippets.

@fatgy
Created March 21, 2011 05:42
Show Gist options
  • Save fatgy/879082 to your computer and use it in GitHub Desktop.
Save fatgy/879082 to your computer and use it in GitHub Desktop.
get marker's coordinates (latitude,longitude,zoom,mercator,container,div) http://www.william-map.com/20100416/1/map.htm
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var overlay;
function initialize() {
var latlng = new google.maps.LatLng(48.86, 2.34);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
}
function placeMarker(location) {
if (marker != null) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: location,
map: map
});
var mapType = map.mapTypes[map.getMapTypeId()];
var mapPixel = mapType.projection.fromLatLngToPoint(location);
var containerPixel = overlay.getProjection().fromLatLngToContainerPixel(location);
var divPixel = overlay.getProjection().fromLatLngToDivPixel(location);
document.getElementById("info").innerHTML = "<table>" +
"<tr><td>LatLng</td><td>" + location.lat() + ","+ location.lng() + "</td></tr>" +
"<tr><td>Zoom</td><td>" + map.getZoom() + "</td>,</tr>" +
"<tr><td>Mercator</td><td>" + mapPixel.x + "," + mapPixel.y + "</td></tr>" +
"<tr><td>Container</td><td>" + containerPixel.x + "," + containerPixel.y + "</td></tr>" +
"<tr><td>Div</td><td>" + divPixel.x + "," + divPixel.y + "</td></tr></table>";
}
</script>
</head>
<body onload="initialize()">
<p>Click on the map to see coordinates (latitude,longitude,zoom,mercator,container,div)</p>
<div id="map_canvas" style="width:512px; height:384px"></div>
<div id="info" style="width:512px"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment