I'm making a Google Maps application where a user can search for a location. This location must point into the direction of a predefined marker.
Given the following pieces of code:
The predefined marker:
var station = new google.maps.LatLng(52.375401, 5.218824);
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
The marker that will be placed on the location that the user searched:
var direction = new google.maps.LatLng(52.376423, 4.887234);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: false,
title: "test"
});
directionMarker.setIcon(({
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 6
}));
How can I make sure that the direction marker (i.e the marker from the user search result) always points to the predefined marker?
I'm making use of the Google Maps API v3.
I've created a jsFiddle, which you can find here
Ok here you go:
Use the google.maps.SymbolPath.FORWARD_CLOSED_ARROW so that it points to the north.
Add the Geometry library to be able to compute a heading.
Use the rotation parameter on your direction icon.
Here is how to compute the heading from your direction marker to the station:
var heading = google.maps.geometry.spherical.computeHeading(direction,station);
Then use it to rotate your icon accordingly:
directionMarker.setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 6,
rotation: heading
});
You also had one unnecessary pair of () in the above code which I have removed.
JSFiddle demo
Related
I have a map on a view which displays some markers and with info boxes.
Everything works fine, but when I set the icon property of the map to a unique image, the marker shows both images with my unique icon overlaying the default google pin.
This is what it currently looks like:
!https://imgur.com/a/6P1tgE7
I have tried numerous definitions on the map constructor but the result has been the same.
var image = 'http://maps.google.com/mapfiles/ms/icons/rangerstation.png';
//Add markers to view
function addMarker(x, y, ward, community, lganame, projecttype) {
var location = new google.maps.LatLng(x, y);
var marker = new google.maps.Marker({
position: location,
map: map,
title: ward
});
marker.setIcon(image);
addInfoWindowToMarker(marker, ward, community, lganame, projecttype);
}
I would like the icon being displayed to be just the one I specify and completely ignore the default Google Maps marker.
I solved the problem by changing my marker definition as such.
Note I also scaled the size down or better presentation.
function addMarker(x, y, ward, community, lganame, projecttype) {
var location = new google.maps.LatLng(x, y);
var marker = new google.maps.Marker({
position: location,
map: map,
title: ward,
//icon: 'http://maps.google.com/mapfiles/ms/icons/rangerstation.png',
icon: new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/rangerstation.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(20, 20)
)
});
//Call info windows and bounce event listener so the marker animates when it is clicked
addInfoWindowToMarker(marker, ward, community, lganame, projecttype);
}
It works just fine now.
I have used the Google Maps PHP/XML Example to build a map and I want to include custom markers. Currently a marker status changes the marker icon and assigns a label as shown below. However I want to use hi-res markers so I need to resize the icons.
I understand I need to use new google.maps.Size(X,X);, but I don't know how to build this into the customLabel variable as the examples I've seen use a different method to show icons.
A nudge in the right direction would be helpful.
var customLabel = {
completed: {
label: 'C',
icon: './assets/map/images/icon_green.png'
},
failed: {
label: 'F'
icon: './assets/map/images/icon_red.png'
}
};
var status = markerElem.getAttribute('status');
var icon = customLabel[status] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
icon: icon.icon,
animation: google.maps.Animation.DROP
});
Have a look at the documentation of MarkerOptions interface:
https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions
You will see that icon property may be a String, Icon or Symbol interfaces. Currently you are setting an icon property as a String value. In order to define size you should assign an Icon object to icon property. The Icon interface is documented in
https://developers.google.com/maps/documentation/javascript/reference/marker#Icon
So, you should use something like
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
icon: {
url: icon.icon,
size: new google.maps.Size(X,X)
},
animation: google.maps.Animation.DROP
});
I hope this helps!
Is it possible to mark (change color/size etc) vertex in editable Polygon?
var polygon = new google.maps.Polygon({
map:_map,
path:path,
editable:true,
draggable:true,
fillColor: '#428FDE',
fillOpacity:0.4,
strokeColor:'#428FDE',
strokeWeight:1
});
For example when i hover divs (1,2,3 or 4) i want to mark vertex in polygon.
I can add just custom marker in vertex LatLng, but i hope its some simply solution.
There doesn't seem to be any way to adjust the styling of the vertices, they seem to inherit whatever their Polyline's styling is.
What you could do is add a marker on that point. Something like:
var path = polyline.getPath();
var point;
$('div').on('hover', function() {
var vertex = $(this).data('vertex');
point = new google.maps.Marker({
position: path[vertex-1]
map: map
});
});
<div data-vertex="1">1</div>
<div data-vertex="2">2</div>
<div data-vertex="3">3</div>
<div data-vertex="4">4</div>
I have a polygon which is editable so when i start to edit it it shows small icon on it.
Below in picture an arrow icon (for undo changes).
so i want to add another icon by my own so user can delete that polygon by clicking on it. So ho to add icon there?
Update
Here is what i do so far
Link
Now i just want to add icon when polygon complete event fired.
So you've already got the event listener for when the polygon is complete.
What you could do is add a marker in the middle of your polygon, with a custom icon that looks similar or identical to the 'undo' icon Google are using.
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.FALSE);
// find out the paths of this polygon
var path = polygon.getPath();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < path.length; i++) {
bounds.extend(path.getAt(i));
}
var centre = bounds.getCenter();
// add a marker here:
var marker = new google.maps.Marker({
position: centre,
map: map,
icon: 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
});
I have a polyline which consists of 10 markers.
Is there a way to define closest markers (previous & next) while mouse_over or mouse_click event occurs on some part of polyline?
For example, I have clicked on 1 part of polyline. This part of polyline is between 2 markers. I need to search 2 markers with theirs LatLng positions.
Any suggestions would be very appreciated.
Thanks.
Update1
Here is the snippet1 (getting latlng for each marker from the Database (from server's API)):
var marker = new google.maps.Marker({
position: new google.maps.LatLng(
json.coordinate.latitude,//getting from response from server's API
json.coordinate.longitude
),
map: this.map,
timestamp: json.timestamp
});
markersArray.push(marker);
And snippet2 (Filling array of markers and drawing a polyline):
var latlngs = []; //get locations (latLng) from markers
for (var i in markersArray) {
latlngs.push(markersArray[i].getPosition());
}
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
var polyline = new google.maps.Polyline({
path: latlngs,
/*icons: [{
icon: lineSymbol,
offset: '100%'
}],*/
strokeColor: "#000000",
map: this.map
})
google.maps.event.addListener(polyline, 'mouseover', function(event)
{
//TODO: ???
});
Be honest, I need next four things:
1. Hover the mouse over the polyline
2. Define prev/next markers between the polyline mouse_over event occured
3. Get marker.timestamp values from these markers
4. Draw direction (as google.maps.SymbolPath.FORWARD_OPEN_ARROW) ONLY for this part of polyline (not for all polyline)