2009年10月23日金曜日

[Google Map V3]How to use the OverlayView's fromDivPixelToLatLng and fromLatLngToDivPixel functions(how to convert the google.maps.Point to LatLng)

How to use the OverlayView's fromDivPixelToLatLng(converter method from pixel in div to LatLng object) and fromLatLngToDivPixel(converter method from LatLng object to pixel in div field) functions.
(how to convert the google.maps.Point to LatLng) on Google Map Version 3.
This is my sample program. This program works fine in my test environment.Please let me know if I'm misunderstanding.

References
Examples
 var map=null;
var projectionHelper=null;

function initialize(){
var mapElem = document.getElementById('map');
var gmapOpts={
zoom:10
,center:new google.maps.LatLng(37.421843,-122.084026)
,mapTypeId:google.maps.MapTypeId.ROADMAP
,mapTypeControl:true
,scaleControl:true
,navigationControl:false
,draggable:true
,scrollwheel:false
}

//initialize the google map object
map=new google.maps.Map(mapElem,gmapOpts);
//initialize the OverlayView object
projectionHelper=new ProjectionHelper(map);
}

//converter from google.maps.Point object to google.maps.LatLng object
function fromPixelToLatLng(point){
if(point==null || !(point instanceof google.maps.Point)){
return null;
}
return projectionHelper.getProjection().fromDivPixelToLatLng(point);
}

//converter from google.maps.LatLng object to google.maps.Point object
function fromLatLngToPixel(latLng){
if(latLng==null || !(latLng instanceof google.maps.LatLng)){
return null;
}
return projectionHelper.getProjection().fromLatLngToDivPixel(latLng);
}

//calculate the array of the polygon's path and draw polygon ogject into the google map
//
//***** Attention *****
//This method should be called from the ProjectionHelper.prototype.draw()
//because the fromLatLngToDivPixel and fromDivPixelToLatLng functions won't work fine.
//*********************
function drawPolygons(){
//google hq's location
var googleHqLatLng=new google.maps.LatLng(37.421843,-122.084026);
//conversion the google.map.LatLng object to the google.map.Point object.
var googleHqPoint=fromLatLngToPixel(googleHqLatLng);
....
//culculates the pixel X-Y coordinates to draw the circle around the google headquarter.
var radius=5000;
var plotPoints=40;
var plotPointsPath=new Array();
for(var i=0;i < plotPoints+1;i++){
//calculate the pixel X-Y coordinates on the google map object to draw the circle
var theta=2.0*Math.PI/plotPoints*i;
var x=radius*Math.cos(theta)+googleHqPoint.x;
var y=radius*Math.sin(theta)+googleHqPoint.y;
//after calculating the pixcel x and y, convert the google.maps.Point(x,y) to the LatLng object.
var latLng=fromPixelToLatLng(new google.maps.Point(x,y));
//set the LatLng object into the Array object
plotPointsPath.push(latLng);
}

var polygonOpts={
paths:paths
}
var polygon=new google.maps.Polygon(polygonOpts);
polygon.setMap(map);
}

//initialize the OverlayView
//helper functions
function ProjectionHelper(overlayMap) {
google.maps.OverlayView.call(this);
this.set_map(overlayMap);
}

ProjectionHelper.prototype = new google.maps.OverlayView();
ProjectionHelper.prototype.draw = function () {
if (!this.ready) {
this.ready = true;

//call the draw function here.
drawPolygons();
}
}