I have searched in google but i couldn't get it. I need this type where values to be in markers
I tried something but i didn't get the result
var locations = [
[33.906896, -6.263123, 20],
[34.053993, -6.792237, 30],
[33.994469, -6.848702, 40],
[33.587596, -7.657156, 50],
[33.531808, -7.674601, 8],
[33.58824, -7.673278, 12],
[33.542325, -7.578557, 15]
];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(28.975750, 10.669184),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
icon: 'icon.png' + locations[i][2]
map: map
});
}
You cannot do that. A marker with label can only show 1 character. But you can create the marker icon on the fly in code. Here is a rough example :
function createMarker(width, height, title) {
var canvas, context, radius = 4;
canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
context = canvas.getContext("2d");
context.clearRect(0, 0, width, height);
context.fillStyle = "rgb(0,191,255)";
context.strokeStyle = "rgb(0,0,0)";
context.beginPath();
context.moveTo(radius, 0);
context.lineTo(width - radius, 0);
context.quadraticCurveTo(width, 0, width, radius);
context.lineTo(width, height - radius);
context.quadraticCurveTo(width, height, width - radius, height);
context.lineTo(radius, height);
context.quadraticCurveTo(0, height, 0, height - radius);
context.lineTo(0, radius);
context.quadraticCurveTo(0, 0, radius, 0);
context.closePath();
context.fill();
context.stroke();
context.font = "bold 10pt Arial"
context.textAlign = "center";
context.fillStyle = "rgb(255,255,255)";
context.fillText(title, 15, 15);
return canvas.toDataURL();
}
and when you place the markers :
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
icon: createMarker(30, 20, '$' + locations[i][2].toString()),
map: map,
});
}
demo -> http://jsfiddle.net/cfbh9va8/
As said this is a rough demonstration, showing the technique. I am sure there is a lot of examples drawing a canvas with arrow and so on, or perhaps you can easily do this yourself. My graphical skills are not that good :)
Related
I am trying to draw multiple polygons using google shapes API. I need to get the intersection of two polygons.
Here I can draw the background polygon(in black) by giving the array of path of each polygon.
Below is my code, here I am giving MVC Array as paths for polygon.
I just want the intersection area to be in separate color. Please check the screen shot link attached after the code.
var bgAreaCoordinates = [];
var bgbounds = map.getBounds(); // Boundary coordinates of the visible area of map
var NE = bgbounds.getNorthEast();
var SW = bgbounds.getSouthWest();
var bgPathCoordinates = [NE, new google.maps.LatLng(NE.lat(),SW.lng()),
SW, new google.maps.LatLng(SW.lat(),NE.lng())];
// Array of boundary coordinates of the visible part of the map
bgAreaCoordinates.push(bgPathCoordinates);
for (var key in flightPlanCoordinates) {
for (var k in flightPlanCoordinates[key]) {
bgAreaCoordinates.push(flightPlanCoordinates[key][k]);// Getting array of coordinates of each polygon
}
}
if (bgPath['bg']) {
bgPath['bg'].setMap(null); // remove the previous bg
}
console.info(bgAreaCoordinates);
bgPath['bg'] = new google.maps.Polygon({
// paths: [bgPathCoordinates, bgAreaCoordinates],
paths:bgAreaCoordinates,
geodesic: true,
strokeColor: '',
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#687472',
fillOpacity: 0.7
});
bgPath['bg'].setMap(map); // Draw the bg polygon : Google shapes Api
http://i.stack.imgur.com/VjTZe.png
Thanks in advance!
Here is an example that does what I think you want to do (make a hole in a polygon that covers the earth and cover that hole with a polygon with a different color). The example polygon happens to be a circle.
code snippet
// This example creates circles on the map, representing
// populations in the United States.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2842518
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8143197
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3844829
};
var cityCircle;
var bounds = new google.maps.LatLngBounds();
function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir == 1) {
var start = 0;
var end = points + 1
} // one extra here makes sure we connect the ends
else {
var start = points + 1;
var end = 0
}
for (var i = start;
(dir == 1 ? i < end : i > end); i = i + dir) {
var theta = Math.PI * (i / (points / 2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
bounds.extend(extp[extp.length - 1]);
}
return extp;
}
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var outerbounds = [
new google.maps.LatLng(85, 180),
new google.maps.LatLng(85, 90),
new google.maps.LatLng(85, 0),
new google.maps.LatLng(85, -90),
new google.maps.LatLng(85, -180),
new google.maps.LatLng(0, -180),
new google.maps.LatLng(-85, -180),
new google.maps.LatLng(-85, -90),
new google.maps.LatLng(-85, 0),
new google.maps.LatLng(-85, 90),
new google.maps.LatLng(-85, 180),
new google.maps.LatLng(0, 180),
new google.maps.LatLng(85, 180)
];
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
paths: [outerbounds, drawCircle(citymap['newyork'].center, 10, -1)]
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Polygon(populationOptions);
map.fitBounds(bounds);
var coverHole = new google.maps.Polygon({
strokeColor: '#FFFF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.35,
map: map,
paths: [drawCircle(citymap['newyork'].center, 10, -1)]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
I am trying to add text along the arc and I read the tutorial. There is a function as below. I don't quite understand the difference between Layer and Context and which one I should use. Is a Layer Canvas plus Context?
I created an arc on the layer which is different from the tutorial. In drawTextAlongArc, how can I draw the text along the arc using Layer? Or I have to use Context to do the work? It's not working now. But if it works, will the arc be drawn on the layer?
function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
var len = str.length, s;
context.save();
context.translate(centerX, centerY);
context.rotate(-1 * angle / 2);
context.rotate(-1 * (angle / len) / 2);
for(var n = 0; n < len; n++) {
context.rotate(angle / len);
context.save();
context.translate(0, -1 * radius);
s = str[n];
context.fillText(s, 0, 0);
context.restore();
}
context.restore();
}
var stage = new Kinetic.Stage({
container: "mainContainer",
width: $("#mainContainer").width(),
height: $("#mainContainer").height()
});
var layer = new Kinetic.Layer();
var kineticGroup = new Kinetic.Group({
x: 300,
y: 120,
draggable: true,
fill: 'black',
draggable: true
});
var arc = new Kinetic.Arc({
innerRadius: 90,
outerRadius: 92,
stroke: 'black',
strokeWidth: 1,
angle: 180,
rotationDeg: 180
});
var canvas = layer.getCanvas(),
context = canvas.getContext('2d'),
centerX = canvas.width / 2,
centerY = canvas.height - 30;
drawTextAlongArc(context, 'Text along arc path', centerX, centerY, 92, 180);
context.stroke();
kineticGroup.add(arc);
layer.add(kineticGroup);
stage.add(layer);
stage.draw();
http://web3o.blogspot.in/2010/05/google-maps-dynamically-movable-and.html
From the above link i got V2 google maps code which is working fine, but not able to import V3 beach markers so i convert the draw circle, circle resize and circle center marker function to V3 and i am not getting the circle in the maps where as i am getting all the marker, beach marker flags etc.
Following is the code, Kindly help me in fixing this, save the code as HTML file and execute in the browser.
I am having issue in the drawCircle function were the circle is not drawn on the Map.
<!--<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyDAAkI8Q59oV68_F8r8hL66vlhCu9cWNQM&sensor=true" type="text/javascript"></script>-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
<script type="text/javascript">
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
//Global variables
var map;
var circle = [];
//circle[0] = {map_center: new GLatLng(38.903843, -94.680096),
// };
var Cobj = [];//{'mp_center':
var frndmap = [];
var bounds = new google.maps.LatLngBounds; //Circle Bounds
var map_center = new google.maps.LatLng(12.9735597, 77.6410402);
frndmap = [['Mahesh Pusala', 12.9735521, 77.6410431, 1], ['Bala Sundar', 12.9735567, 77.6410489, 2]];
var Circle=[];//null,null];//Circle object
var CirclePoints = []; //Circle drawing points
var CircleCenterMarker, CircleResizeMarker = [];//null,null];
var circle_moving = false; //To track Circle moving
var circle_resizing = false; //To track Circle resizing
var radius = []; //1 km
//var min_radius = 0.5; //0.5km
//var max_radius = 50; //5km
//Circle Marker/Node icons
/*var redpin = new google.maps.MarkerImage(); //Red Pushpin Icon
redpin.image = "http://maps.google.com/mapfiles/ms/icons/red-pushpin.png";
redpin.iconSize = new google.maps.Size(32, 32);
redpin.iconAnchor = new google.maps.Point(10, 32);*/
var redpin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/red-pushpin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(10, 32));
/*var bluepin = new google.maps.MarkerImage(); //Blue Pushpin Icon
bluepin.image = "http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png";
bluepin.iconSize = new google.maps.Size(32, 32);
bluepin.iconAnchor = new google.maps.Point(10, 32);*/
var bluepin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(10, 32));
function initialize() { //Initialize Google Map
//for(c in circle) {
//map = new GMap2(document.getElementById("map_canvas")); //New GMap object
var myOptions = {
zoom: 14,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*addCircleResizeMarker(map_center[0], '0');
addCircleCenterMarker(map_center[0],'0');
drawCircle(map_center[0], radius, '0');
addCircleCenterMarker(map_center[1],'1');
addCircleResizeMarker(map_center[1], '1');
drawCircle(map_center[1], radius, '1');
*/
for(i=0; i<3; i++) {
Cobj[i] = {'map_center':new google.maps.LatLng(12.9735597+i, 77.6410402+i),
'Circle':null,
'CircleResizeMarker':null,
'radius':24+i
};
addCircleCenterMarker(i);
addCircleResizeMarker(i);
drawCircle(Cobj[i].map_center,Cobj[i].radius, i);
}
map.setCenter(map_center);
setMarkers(map, frndmap);
}
// Adds Circle Center marker
//radius
function addCircleCenterMarker(iii) {
point = Cobj[iii].map_center;
var markerOptions = { icon: bluepin, draggable: true };
CircleCenterMarker = new google.maps.Marker(point, markerOptions);
CircleCenterMarker.setMap(map); //Add marker on the map
//X= new google.maps.event();
google.maps.event.addListener(CircleCenterMarker, 'dragstart', function() { //Add drag start event
circle_moving = true;
});
google.maps.event.addListener(CircleCenterMarker, 'drag', function(point) { //Add drag event
drawCircle(point,Cobj[iii].radius, iii);
});
google.maps.event.addListener(CircleCenterMarker, 'dragend', function(point) { //Add drag end event
console.log(point.lng());
circle_moving = false;
drawCircle(point, Cobj[iii].radius, iii);
});
}
// Adds Circle Resize marker
// map_center
function addCircleResizeMarker(iii) {
point = Cobj[iii].map_center;
var resize_icon = new google.maps.MarkerImage(redpin);
resize_icon.maxHeight = 0;
var markerOptions = { icon: resize_icon, draggable: true };
Cobj[iii].CircleResizeMarker = new google.maps.Marker(point, markerOptions);
Cobj[iii].CircleResizeMarker.setMap(map); //Add marker on the map
google.maps.event.addListener(Cobj[iii].CircleResizeMarker, 'dragstart', function() { //Add drag start event
circle_resizing = true;
});
google.maps.event.addListener(Cobj[iii].CircleResizeMarker, 'drag', function(point) { //Add drag event
var new_point = new google.maps.LatLng(Cobj[iii].map_center.lat(), point.lng()); //to keep resize marker on horizontal line
var new_radius = new_point.distanceFrom(Cobj[iii].map_center) / 1000; //calculate new radius
//if (new_radius < min_radius) new_radius = min_radius;
//if (new_radius > max_radius) new_radius = max_radius;
drawCircle(Cobj[iii].map_center, new_radius, iii);
});
google.maps.event.addListener(Cobj[iii].CircleResizeMarker, 'dragend', function(point) { //Add drag end event
circle_resizing = false;
var new_point = new google.maps.LatLng(Cobj[iii].map_center.lat(), point.lng()); //to keep resize marker on horizontal line
var new_radius = new_point.distanceFrom(Cobj[iii].map_center) / 1000; //calculate new radius
//if (new_radius < min_radius) new_radius = min_radius;
//if (new_radius > max_radius) new_radius = max_radius;
console.log(new_radius);
drawCircle(Cobj[iii].map_center, new_radius, iii);
});
}
//Draw Circle with given radius and center
function drawCircle(center,new_radius, iii) {
//Circle = Circle[iii];
//Circle Drawing Algorithm from: http://koti.mbnet.fi/ojalesa/googlepages/circle.htm
//Number of nodes to form the circle
var nodes = new_radius * 40;
if(new_radius < 1) nodes = 40;
//calculating km/degree
xx = new google.maps.LatLng(center.lat() + 0.1, center.lng());
yy = new google.maps.LatLng(center.lat() , center.lng()+0.1);
var latConv = google.maps.geometry.spherical.computeDistanceBetween(center,xx)/100;//center.distanceFrom(new google.maps.LatLng(center.lat() + 0.1, center.lng())) / 100;
var lngConv = google.maps.geometry.spherical.computeDistanceBetween(center,yy)/100;//center.distanceFrom(new google.maps.LatLng(center.lat(), center.lng() + 0.1)) / 100;
CirclePoints = [];
var step = parseInt(360 / nodes) || 10;
var counter = 0;
for (var i = 0; i <= 360; i += step) {
var cLat = center.lat() + (new_radius / latConv * Math.cos(i * Math.PI / 180));
var cLng = center.lng() + (new_radius / lngConv * Math.sin(i * Math.PI / 180));
var point = new google.maps.LatLng(cLat, cLng);
CirclePoints.push(point);
counter++;
}
Cobj[iii].CircleResizeMarker.setPosition(CirclePoints[Math.floor(counter / 4)]); //place circle resize marker
CirclePoints.push(CirclePoints[0]); //close the circle polygon
if (Cobj[iii].Circle) {
//map.removeOverlay(Cobj[iii].Circle);
marker.setMap(null);
} //Remove existing Circle from Map
var fillColor = (circle_resizing || circle_moving) ? 'red' : 'blue'; //Set Circle Fill Color
console.log(CirclePoints);
Cobj[iii].Circle = new google.maps.Polygon(CirclePoints, '#FF0000', 2, 1, fillColor, 0.2); //New GPolygon object for Circle
//Cobj[iii].Circle.setMap(map); //Add Circle Overlay on the Map
//radius = new_radius; //Set global radius
//Cobj[iii].map_center = center; //Set global map_center
//if (!circle_resizing && !circle_moving)
//{
//Fit the circle if it is nor moving or resizing
// fitCircle(Cobj[iii].Circle);
//Circle drawing complete trigger function goes here
//}
}
//Fits the Map to Circle bounds
function fitCircle(Circle) {
bounds = Circle.getBounds();
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = {
url: 'images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(20, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
};
var shadow = {
url: 'images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
size: new google.maps.Size(37, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:450px"></div>
</body>
Your drawCircle function has
Cobj[iii].Circle = new google.maps.Polygon(CirclePoints, '#FF0000', 2, 1, fillColor, 0.2); //New GPolygon object for Circle
Personally I'd rather use google.maps.Circle instead, much simpler
https://developers.google.com/maps/documentation/javascript/reference#Circle
After drawing a Polygon shape on the map. I would like to change what direction the polygon is pointing when the map is refreshed by rotating around one of the points of the polygon. For example point the polygon in the direction of 90 degrees rotating around my first polygon point (code shown below). Can anyone provide any code examples of this working?
I have seen some similar posts however examples given appear over complicated.
poly = new google.maps.Polygon({
strokeWeight: 3,
fillColor: '#5555FF'
});
poly.setMap(map);
poly.setPaths(new google.maps.MVCArray([path]));
var triangleCoords = [
new google.maps.LatLng(51.5087, -0.1277),
new google.maps.LatLng(51.5387, -0.1077),
new google.maps.LatLng(51.5387, -0.1477),
new google.maps.LatLng(51.5087, -0.1277)
];
// Construct the polygon
triangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.8
});
triangle.setMap(map);
google.maps.event.addListener(map, 'click', triangle);
}
The following example demonstrates how to rotate a polygon
Note: the rotation is performed around the first point
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
//rotate a polygon
document.getElementById('btnRotate').onclick = function() {
rotatePolygon(bermudaTriangle, 90);
};
}
function rotatePolygon(polygon,angle) {
var map = polygon.getMap();
var prj = map.getProjection();
var origin = prj.fromLatLngToPoint(polygon.getPath().getAt(0)); //rotate around first point
var coords = polygon.getPath().getArray().map(function(latLng){
var point = prj.fromLatLngToPoint(latLng);
var rotatedLatLng = prj.fromPointToLatLng(rotatePoint(point,origin,angle));
return {lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng()};
});
polygon.setPath(coords);
}
function rotatePoint(point, origin, angle) {
var angleRad = angle * Math.PI / 180.0;
return {
x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
};
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
<div id="floating-panel">
<input type="button" id="btnRotate" value="Rotate 90"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
JSFiddle
You might want to look at something like Mike Williams' eshapes library. It was written originally for the Google Maps API v2, but this page demonstrates the version that I ported to the Google Maps API v3.
example
proof of concept fiddle
code snippet;
var map = null;
var triangle, angle, point;
function initMap() {
point = new google.maps.LatLng(44, -80);
var myOptions = {
zoom: 8,
center: point,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"),
myOptions);
angle = 0;
// === Triangle ===
triangle = google.maps.Polyline.RegularPoly(point, 30000, 3, angle, "#ff0000", 8, 1);
triangle.setMap(map);
google.maps.event.addListener(triangle, "click", rotateTriangle);
}
google.maps.event.addDomListener(window, 'load', initMap);
function rotateTriangle() {
triangle.setMap(null);
angle += 90;
if (angle >= 360) angle -= 360;
triangle = google.maps.Polyline.RegularPoly(point, 30000, 3, angle, "#ff0000", 8, 1);
triangle.setMap(map);
google.maps.event.addListener(triangle, "click", rotateTriangle);
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// From v3_eshapes.js:
// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy"
//
// This Javascript is provided by Mike Williams
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//
// This work is licenced under a Creative Commons Licence
// http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross
google.maps.Polyline.RegularPoly = function(point, radius, vertexCount, rotation, colour, weight, opacity, opts) {
rotation = rotation || 0;
var tilt = !(vertexCount & 1);
return google.maps.Polyline.Shape(point, radius, radius, radius, radius, rotation, vertexCount, colour, weight, opacity, opts, tilt)
}
google.maps.Polyline.Shape = function(point, r1, r2, r3, r4, rotation, vertexCount, colour, weight, opacity, opts, tilt) {
if (!colour) {
colour = "#0000FF";
}
if (!weight) {
weight = 4;
}
if (!opacity) {
opacity = 0.45;
}
var rot = -rotation * Math.PI / 180;
var points = [];
var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
var step = (360 / vertexCount) || 10;
var flop = -1;
if (tilt) {
var I1 = 180 / vertexCount;
} else {
var I1 = 0;
}
for (var i = I1; i <= 360.001 + I1; i += step) {
var r1a = flop ? r1 : r3;
var r2a = flop ? r2 : r4;
flop = -1 - flop;
var y = r1a * Math.cos(i * Math.PI / 180);
var x = r2a * Math.sin(i * Math.PI / 180);
var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;
points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
}
return (new google.maps.Polyline({
path: points,
strokeColor: colour,
strokeWeight: weight,
strokeOpacity: opacity
}))
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<b>Click triangle's border to rotate it.</b>
<div id="map"></div>
I had the same issue, i wanted to rotate a symbol or polygon. The rotation attribute defines the rotation of the object and thats all.
Try it.
The path defines the shape of the polygon and uses SVG notation like (x,y) coordinates.
function init_nuevo_mapa(){
var mapOptions = {
zoom: 13
center: new google.maps.LatLng(-33.5351136,-70.5876618)
};
var new_map = new google.maps.Map(document.getElementById('new-map'), mapOptions);
var myLatLng = new google.maps.LatLng(-33.5351136,-70.5876618)
var image = {
path: 'M 0,0 -10,-30 10,-30 z',
rotation: 10, //10ยบ clockwise
fillColor: "red",
fillOpacity: 0.5,
scale: 1,
strokeColor: "red",
strokeWeight: 4
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
zIndex: zIndex,
title: location[2]
});
You can easily do it with the new Google Maps symbol object. Just take a look at https://developers.google.com/maps/documentation/javascript/reference#Symbol.
Warning: This works really bad with IE 9 when you have a lot of markers.
Good luck!
I'm drawing two polygons on the map. The second polygon makes a hole in the first one. I want the first polygon to cover as much as possible of the earth. So lets focus on that and drop the hole for the time.
Since max/min lat = 90,-90 and max/min lng = 180, -180.
If I draw the following the seems to "eat each other up"
nw = new google.maps.LatLng(90, -180, true);
ne = new google.maps.LatLng(90, 180, true);
se = new google.maps.LatLng(-90, 180, true);
sw = new google.maps.LatLng(-90, -180, true);
points = [nw, ne, se, sw];
If I tweak the values a little I can get them to not eat up each other but I'm always left with quite a big miss.
Thanks in advance.
I got it to work, here is the code:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 1000;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the
else {var start=points+1;var end=0}
for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)
{
var theta = Math.PI * (i / (points/2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
bounds.extend(extp[extp.length-1]);
}
// alert(extp.length);
return extp;
}
var map = null;
var bounds = null;
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(42,-80),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
bounds = new google.maps.LatLngBounds();
var donut = new google.maps.Polygon({
paths: [triangleCoords = [
new google.maps.LatLng(-87, 120),
new google.maps.LatLng(-87, -87),
new google.maps.LatLng(-87, 0)],
drawCircle(new google.maps.LatLng(42,-80), 1000, -1)],
strokeColor: "#000000",
strokeOpacity: 0.6,
strokeWeight: 2,
fillColor: "#999999",
fillOpacity: 0.6
});
donut.setMap(map);
map.fitBounds(bounds);
}
</script>