Hello, friends!
I have difficult question on developing application on basis of Google
Map.
I must draw my own polylines with specific style - dashed, for
example.
That's why I extending GOverlay interface to draw canvas with my
rules. There are simple code:
function NeoLine(points, color, weight, opacity, tooltip){
this.points_ = points;
this.color_ = color || "#888888";
this.opacity_ = opacity;
this.weight_ = weight || 2;
this.tooltip_ = tooltip;
}
NeoLine.prototype = new GOverlay();
NeoLine.prototype.initialize = function(map) {
var canvas = document.createElement("canvas");
canvas.id = "canva2";
canvas.style.border = "1px solid #f00";
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.width = "400px";
canvas.style.height = "400px";
if (canvas.getContext){
var context = canvas.getContext('2d');
context.strokeStyle = '#f00';
context.scale(1,1);
context.lineWidth = 1;
context.beginPath();
context.moveTo(100, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
context.stroke();
context.closePath();
context.save();
context.restore();
}
map.getPane(G_MAP_MAP_PANE).appendChild(canvas);
this.map_ = map;
this.canvas_ = canvas;
}
NeoLine.prototype.remove = function() {
this.canvas_.parentNode.removeChild(this.canvas_);
}
NeoLine.prototype.copy = function() {
return new NeoLine(this.points_, this.color_, this.weight_,
this.opacity_, this.tooltip_);
}
NeoLine.prototype.redraw = function(force) {
if (!force) return;
this.canvas_.style.width = "400px";
this.canvas_.style.height = "400px";
}
Then, I add the another canvas with same style simple on the same page
(not in map div - before it) like this:
<canvas id="canva" width="400px" height="400px" style="position:fixed;
left:1px; top:0px; z-index:9000; border: 1px solid black;
cursor:pointer;">
<img src="no_canvas_sorry.jpg" />
</canvas>
<script>
var canvas = document.getElementById('canva');
if (canvas.getContext && canvas.style.cursor=='pointer'){
var context = canvas.getContext('2d');
context.strokeStyle = '#670';
context.scale(1,1);
context.lineWidth = 1;
context.beginPath();
context.moveTo(100, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
context.stroke();
context.closePath();
context.save();
context.restore();
}
The result you can see on this image:
http://s49.radikal.ru/i124/0910/11/516c3e73e6dc.jpg
Why, canvas context in google map seems so stretched?
I can't find any hint on this problem. Please, can you help me?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en
-~----------~----~----~----~------~----~------~--~---
