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>
Related
hi i have i one question for polygon and marker, i have more then 50 polygon in map with its id now i want when i search address and put marker on map then i want to get that polygon id where marker is place
this is my code for drop polygon in map
var polyline = new google.maps.Polygon({
paths: objArray,
strokeColor: 'green',
id:zoneid,
strokeOpacity: 1.0,
strokeWeight: 3,
draggable: false,
editable: false
});
polyline.setMap(map);
i use this map for dispaly marker on polygone
when i put marker on polygon then i want to get that polygon id
if you have any example or proper solution then please send me
Use the geometry library. Firstly specify that as a parameter when loading in the JS:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
Then when you create a marker, use its coordinates and check if it's in each of your polygons. You probably want to put each polygon into an array that you can loop over.
var markerCoords = marker.getPosition();
for (var i = 0; i < polygons.length; i++) {
if (google.maps.geometry.poly.containsLocation(markerCoords, polygons[i])) {
var id = polygons[i].id;
break;
}
}
See:
https://developers.google.com/maps/documentation/javascript/geometry#containsLocation
https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation
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'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
Edge scrolling
Let's say I've created a simple map with default options, a draggable marker and a draggable shape (I've tested it with circle, rectangle, polygon and polyline). When I drag the marker or shape to the edge of map canvas, the map starts scrolling and that's fine.
JSFiddle demo
The problem
When I set map's draggable property to false, the edge scrolling doesn't work anymore with the marker, but all the shapes ignore it and the map is still scrolled - and that's unexpected behaviour.
var mapOptions = {
...
draggable: false
};
JSFiddle demo
The problem exists in both release (3.16) and experimental (3.17) versions. I've reported it on google's bugtracker, but it will probably take years before they fix it. So, does anyone know a workaround?
Edit: for the sake of simplicity, let's assume that zooming the map is also disabled
You will need to listen to the map zoom_changed, bounds_changed and the circle dragend events.
If the shape is dragged outside of the defined bounds, set it back to its last position and set the map center to the original value.
function initialize() {
var bounds = null;
var zoomLevel = 15;
var center = new google.maps.LatLng(20.291, 153.027);
var mapOptions = {
zoom: zoomLevel,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN,
draggable: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: center,
draggable: true
});
var circlePos = new google.maps.LatLng(20.281, 153.037);
var circle = new google.maps.Circle({
map: map,
center: circlePos,
radius: 100,
strokeWeight: 1,
fillColor: '#000000',
fillOpacity: 1,
draggable: true
});
google.maps.event.addListener(map, 'zoom_changed', function () {
// If user changes zoome level, get the new level and the new map bounds
zoomLevel = map.getZoom();
bounds = map.getBounds();
});
google.maps.event.addListener(map, 'bounds_changed', function () {
// Get the initial map bounds if not set yet
if (!bounds) {
bounds = map.getBounds();
}
});
google.maps.event.addListener(circle, 'dragend', function () {
var position = circle.getCenter();
if (bounds.contains(position)) {
// Update the circle position
circlePos = position;
} else {
// Set the circle back to its last position
// Reset the map center as it might have changed
circle.setCenter(circlePos);
map.setCenter(center);
}
});
};
JSFiddle demo
Kindly note that you can eliminate the zoom_changed event listener if you disable the zooming options on your map. Problem if a user can use the zoom is that your shape can still disappear from the map bounds if the user zooms in, which can be confusing.
Google fixed it in version 3.19, it now works properly.
I am trying to combine two separate methods to display both markers and polylines on one map. Is it possible? and if so how would I do this. Or conversely how would I add polylines to my markers sample.
From http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Without my actual code I appreciate this is a probably a wasted post.. but I am having trouble adding my code..
Perhaps that should have been my first question..
This script will add markers and draw a polyline between them:
<script>
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* #param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
Excellent Documentation available here:
https://developers.google.com/maps/documentation/javascript/reference
https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-complex
It is certainly possible to display markers and polylines on the same map:
Here is an example that displays both markers and independent polylines.
Here is an example that uses the third party geoxml3 KML parser to create them from a KML file (or using KmlLayer).