SVG Icon point in the direction of another marker - javascript

I'm making a Google Maps application which has a video camera icon representing the street view and another icon representing any position.
See the Fiddle:
http://jsfiddle.net/uepc2f8n/52/
If I uncomment this "//google.maps.SymbolPath.FORWARD_CLOSED_ARROW", works fine! But when I put the camera path, the position does not get in the right position.
I don't know much about SVG Path, it's complex!
How do I point the lens of the camera in the direction of my marker?
code snippet (from linked fiddle):
function initialize() {
var direction = new google.maps.LatLng(52.376423, 4.887234);
var station = new google.maps.LatLng(52.155401, 5.118824);
var mapProperties = {
center: direction,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: true,
title: "test"
});
var heading = google.maps.geometry.spherical.computeHeading(direction, station);
directionMarker.setIcon({
path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z", //google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 2,
rotation: heading
});
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
var polyline = new google.maps.Polyline({
path: [direction, station],
geodesic: true,
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}
initialize();
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<div id="map-canvas"></div>

You need to set the anchor and the rotation of the SVG Symbol correctly for your particular symbol. Looks to me like you want an anchor of (3,-10) and a rotation of heading - 90 degrees.
anchor: new google.maps.Point(3, -10),
rotation: heading - 90
updated fiddle
code snippet:
function initialize() {
var direction = new google.maps.LatLng(52.376423, 4.887234);
var station = new google.maps.LatLng(52.155401, 5.118824);
var mapProperties = {
center: direction,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: true,
title: "test"
});
var heading = google.maps.geometry.spherical.computeHeading(direction, station);
directionMarker.setIcon({
path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",
scale: 2,
anchor: new google.maps.Point(3, -10),
rotation: heading - 90
});
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
var polyline = new google.maps.Polyline({
path: [direction, station],
geodesic: true,
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
var bounds = new google.maps.LatLngBounds();
bounds.extend(station);
bounds.extend(direction);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>

Related

Drawing a POLYGON from initial position

My problem is: I need to draw with mode POLYGON with a initial point, like a marker or another element. For example - JSFiddle Example
With marker:
var initialPosition = new google.maps.Marker({
position: {
lat: -22.397542,
lng: -46.884630
}
});
This position is given without any user interaction. How can I do that?
In my example, how can I draw a polygon starting from marker without click it, making marker position my first polygon point?
You could do the following: use addListenerOnce to detect a click on the map (only once). This will allow to create a Polygon that goes from your marker position, to where the user clicked, and back to the marker position.
By setting the editable property to true, you can then move each Polygon point separately, and add segments by dragging the existing segment(s) middle point(s).
Here is a working example:
function initialize() {
var myLatLng = new google.maps.LatLng(46.2, 6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListenerOnce(map, 'click', function(e) {
var origin = marker.getPosition();
var coords = [
origin,
e.latLng,
origin,
];
var poly = new google.maps.Polygon({
map: map,
paths: coords,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

How do I set a marker's size by a number of purchases?

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

Change marker icon options in google maps

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>

Google Maps Engine API - KML Layers Obstructing New Markers Event

I am currently building out a small widget that allows someone to see a kml heat map of the united states population density then select an area on that map and drop a market on to that location. The user then enters a number and that creates a mile radius to show the user how much area they cover.
My problem is that I have 63 .kml files for just one state in the US. I know I can remove the xml <name> and <description> to prevent the name from popping up when clicked, but I can't see that being practical with that many .kml files.
Is there a programmatic solution or API solution to prevent just the kml layers from being clickable?
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml'
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
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?v=3.exp"></script>
<div id="map-canvas"></div>
Discretionary note: Google API does not work well with Stack Overflow's code snippet's widget.
set the KmlLayer clickable option to false
clickable boolean If true, the layer receives mouse events. Default value is true.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml',
clickable: false
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
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>

Create custom symbol on polyline using SVG path

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

Categories

Resources