I have been searching everywhere for something similar, but can not find anything to help. I have searched the Google Maps API for Javscript for any sort of help, however I couldn't work it out.
I am looking to simply rotate the marker by +5 degrees per click, but cant seem to figure it out. I am looking to do the same by changing the fillColor, however Im sure I could figure it out if rotation isnt too different.
JAVASCRIPT:
function addMarkerUpstream() {
var upstreamIcon = {
path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z',
fillColor: '#fbb040',
fillOpacity: 1,
scale: 1.5,
strokeColor: '#000',
strokeWeight: 0.5,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(15, 50),
rotation: 0,
}
var marker = new google.maps.Marker({
position: map.center,
map: map,
title: 'Upstream',
draggable: true,
icon: upstreamIcon
});
latLang = marker.getPosition();
marker.setMap(map);
//ROTATION
$("#rotate").click(function() {
upstreamIcon.setProperty({rotation:+5});
});
//FILL COLOR
$("#fill_red").click(function() {
upstreamIcon = { fillColor: 'red'}
});
};
EDIT:
HERE is a jsFiddle of all the code in my project.
Try this:
$("#rotate").click(function() {
var icon = marker.getIcon();
var rotation = icon.rotation;
rotation += 5;
icon.rotation = rotation;
marker.setIcon(icon);
});
Try like this,
function addMarkerUpstream() {
var rotate = 0;
var upstreamIcon = {
path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z',
fillColor: '#fbb040',
fillOpacity: 1,
scale: 1.5,
strokeColor: '#000',
strokeWeight: 0.5,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(15, 50),
rotation: rotate,
}
var marker = new google.maps.Marker({
position: map.center,
map: map,
title: 'Upstream',
draggable: true,
icon: upstreamIcon
});
latLang = marker.getPosition();
marker.setMap(map);
//ROTATION
$("#rotate").click(function() {
rotate = rotate + 5;
upstreamIcon.{ rotation: rotate }; // Try like this
});
//FILL COLOR
$("#fill_red").click(function() {
upstreamIcon = { fillColor: 'red'}
});
Related
I am studying C# , google map api. and i want to draw click rectangle and calculate rectangle area.
this is my code:
function mode() {
google.maps.event.addListener(map, 'click', function (event) {
var bounds = makeBounds(event.latLng, 200, 100);
placeRec(bounds);
});
}
function placeRec(bounds) {
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
editable: true,
bounds: bounds,
draggable:true
});
}
function makeBounds(nw, metersEast, metersSouth) {
ne = google.maps.geometry.spherical.computeOffset(nw, metersEast, 90);
sw = google.maps.geometry.spherical.computeOffset(nw, metersSouth, 180);
return new google.maps.LatLngBounds(sw, ne);
sowe = bounds.getSouthWest();
noea = bounds.getNorthEast();
}
I succeed draw click Rectangle in google map,
I want to know calculate Rectangle Area.
How do i have to do?
Thank you
In an e-commerce system I'm building, I want to use google maps api to show the origins of the purchases. I want the markers to be shaped as a circle, and I want that circle's size to be determined by the number of purchases made from that particular city. Let's say there were 100 orders from NYC and 200 from Boston, The Boston's circle will be twice the size.
How can I do that?
Your marker icon can be a symbol (SVG path) so you can scale it to your convenience.
The following example upscales the symbol each time you add one to the map. You can easily reuse that to your use case.
var map;
var polyLine;
var polyOptions;
var iconSize = 0.5;
function initialize() {
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addPoint(event);
});
}
function addPoint(event) {
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: iconSize
}
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false,
icon: icon,
zIndex : -20
});
map.panTo(event.latLng);
iconSize += .1;
}
initialize();
JSFiddle demo
I use this code to create my markers (TypeScript btw)
The options for the icon allows me to rotate and set a fill color of the marker.
But how can I change the fill color and rotation after creation?
I have found various responses here on SO, but they refer to changing the icon to a bitmap and swap between red and green bitmaps for example.
Which is not what I want.
var icon = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 4,
fillColor: "#ff5050", //<-- I want to change this after creation
fillOpacity: 1,
strokeWeight: 1,
rotation: 0 //<-- I want to change this after creation
};
var markerOptions = <google.maps.MarkerOptions>{
map: this.map,
icon: icon,
};
Anyone know?
Calling .setIcon on the marker works for me:
setInterval(function () {
angle += 30;
cnt++;
icon.rotation = angle;
icon.fillColor = colorArray[cnt % colorArray.length]
marker.setIcon(icon);
}, 1000);
working fiddle
working code snippet:
var map;
var angle = 0;
var marker;
var icon = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 4,
fillColor: "#ff5050", //<-- I want to change this after creation
fillOpacity: 1,
strokeWeight: 1,
anchor: new google.maps.Point(0, 5),
rotation: 0 //<-- I want to change this after creation
};
var colorArray = ["#ff0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF"];
var cnt = 0;
function init() {
var startLatLng = new google.maps.LatLng(50.124462, -5.539994);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: startLatLng,
zoom: 12
});
var ptMarker = new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
icon: icon
});
marker.setMap(map);
var circleMarker = new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 24,
strokeWeight: 2,
fillColor: '#009933',
fillOpacity: 0.001,
anchor: new google.maps.Point(0, 0)
}
});
setInterval(function () {
angle += 30;
cnt++;
icon.rotation = angle;
icon.fillColor = colorArray[cnt % colorArray.length]
marker.setIcon(icon);
}, 1000);
}
google.maps.event.addDomListener(window, 'load', init);
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
I have created rectangle in Google map and would like to obtain Latitude and Longitude in code when a user clicks on the rectangle.
When I click on outside the rectangle I obtain Latitude and Longitude. When I click on the rectangle however, I'm unable to get Latitude and Longitude.
Here is My code:
var rectangle;
var map;
var infoWindow;
function initialize() {
function calcBounds(center, size) {
var n = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 0).lat(),
s = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 180).lat(),
e = google.maps.geometry.spherical.computeOffset(center, size.width / 2, 90).lng(),
w = google.maps.geometry.spherical.computeOffset(center, size.width / 2, 270).lng();
return new google.maps.LatLngBounds(new google.maps.LatLng(s, w),
new google.maps.LatLng(n, e));
}
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: new google.maps.LatLng(40.689055, -89.584747),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#008000',
fillOpacity: .2,
editable: false,
draggable: false,
map: map,
bounds: calcBounds(new google.maps.LatLngBounds(
new google.maps.LatLng(40.626805, -89.539396),
new google.maps.LatLng(40.626055, -89.538507)).getCenter(), new google.maps.Size(875, 875))
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#008000',
fillOpacity: .2,
editable: false,
draggable: false,
map: map,
bounds: calcBounds(new google.maps.LatLngBounds(
new google.maps.LatLng(40.750555, -89.633655),
new google.maps.LatLng(40.749805, -89.632766)).getCenter(), new google.maps.Size(875, 875))
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#008000',
fillOpacity: .2,
editable: false,
draggable: false,
map: map,
bounds: calcBounds(new google.maps.LatLngBounds(
new google.maps.LatLng(40.626805, -89.519833),
new google.maps.LatLng(40.626055, -89.518943)).getCenter(), new google.maps.Size(875, 875))
});
google.maps.event.addListener(map, 'click', function(event) {
alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Here is an example
Any suggestions are appreciated, thanks!
You can attach a listener to the rectangle as you do for the map .
google.maps.event.addListener(rectangle, 'click', function(event) {
alert('latitude: ' + event.latLng.lat() + ' , longitude: ' + event.latLng.lng());
});
Example here http://jsfiddle.net/0c9rnyf8/5/
You need to add a click event to each of your rectangles. For example:
google.maps.event.addListener(rectangle, 'click', function( event ){
alert( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() );
});
I am trying to create a flight route using google maps with animation. Is it possible to create a polyline path with custom symbol of airplane as in the demo site of http://www.morethanamap.com/demos/visualization/flights
I am able to create a dashed path with animation. The problem is I have am stuck with creating SVG path. I did try to render a Bezier Curves from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths with path given as "M10 10 C 20 20, 40 20, 50 10" but to no avail.
new google.maps.Polyline({
path: [
new google.maps.LatLng(40, -80),
new google.maps.LatLng(-50, 80)
],
geodesic: true,
strokeOpacity: 0.0,
strokeColor: 'yellow',
icons: [{
icon: {
path: 'M 0,-2 0,2',
strokeColor: 'red',
strokeOpacity: 1.0,
},
repeat: '24px'
}],
map: map,
});
The SVG path used on that demo is:
M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-3 2.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684
I pasted that into this demo online svg editor, scaled to fit.
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1
};
working example
proof of concept fiddle
code snippet:
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(20.291, 153.027),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// [START region_polyline]
// Define a symbol using SVG path notation, with an opacity of 1.
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
anchor: new google.maps.Point(300, 300)
};
var lineCoordinates = [
new google.maps.LatLng(22.291, 154.027),
new google.maps.LatLng(21.291, 155.027),
new google.maps.LatLng(20.291, 156.027),
new google.maps.LatLng(45.291, 158.027),
new google.maps.LatLng(51.47238, -0.45093999999994594)
];
var visibleLine = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0.3,
map: map
});
var staticMark = new google.maps.Marker({
map: map,
position: lineCoordinates[0],
icon: planeSymbol,
visible: false // hide the static marker
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(lineCoordinates[0]);
bounds.extend(lineCoordinates[4]);
// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
var line = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map
});
map.fitBounds(bounds);
animatePlane(line);
// [END region_polyline]
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animatePlane(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 2000;
var icons = line.get('icons');
icons[0].offset = (count / 20) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
You may use a program like Inkscape to draw the image, export is as SVG and copy the path from the source.
Here an example(it takes 3 minutes)
M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z