I have a polyline on which i need to show each points coordinates, but the problem is that each info-window overlays other so i decided to draw only those info-windows which doesnt overlay others, but don't have any idea how to catch it...
Currently i have
window.onload = function() {
var bounds = new google.maps.LatLngBounds();
var coordinates = [];
map = new google.maps.Map(document.getElementById('map_canvas'), {mapTypeId: google.maps.MapTypeId.HYBRID});
for (i = 0, len = points.point.length; i < len; i++) {
var tmp_coor = new google.maps.LatLng(points.point[i].lat, points.point[i].lon);
coordinates.push(tmp_coor);
bounds.extend(tmp_coor);
var infowindow = new google.maps.InfoWindow({
content: points.point[i].lat + ', ' + points.point[i].lon,
maxWidth: 120
});
infowindow.setPosition(tmp_coor);
infowindow.open(map);
}
var polyline = new google.maps.Polyline({
path: coordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false
});
polyline.setMap(map);
map.fitBounds(bounds);
}
It creates
So maybe someone has any suggestions on this problem?
Related
I have drawn a circle and and some polygons using addGeoJson. The problem is some of the polygons are drawn above the circle and some are below. How to fix this issue? I want to draw the circle on top of all the polygons. Here is my code
var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var mapOptions = {
zoom:9,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(mapcontainer, mapOptions);
var circleOptions = {
fillOpacity:0,
strokeColor: '#000000',
strokeWeight:2,
strokeOpacity:1,
center:map1.getCenter(),
radius:2000,
map:map1
};
circleRadius = new google.maps.Circle();
circleRadius.setOptions(circleOptions);
var listOfPolygons = loadPolygons();
//drawing polygon layers
var layer = new google.maps.Data();
var url = 'url/to/cords';
$.ajax({
url: url,
type: 'POST',
data: {'codes': listOfPolygons},
success:function(data) {
layer.addGeoJson(data);
layer.setMap(map1);
layer.setStyle({
strokeColor: '#6da57a',
strokeOpacity:.4,
strokeWeight:1,
fillColor: '#7bd490',
fillOpacity:.6
});
}
});
See the screenshot
Just set the zIndex-options and give the circle a higher zIndex than the data-features.
var circleOptions = {
fillOpacity:0,
strokeColor: '#000000',
strokeWeight:2,
strokeOpacity:1,
center:map1.getCenter(),
radius:2000,
map:map1,
zIndex:1//<----here
};
//........
layer.setStyle({
strokeColor: '#6da57a',
strokeOpacity:.4,
strokeWeight:1,
fillColor: '#7bd490',
fillOpacity:.6,
zIndex:0//<-----here
});
I'have my google map v3 with geolocalisation no problem !
But I would like fetch longitude and latitude to my forms.
Thanks.
You can try Google markers for it. Here is whole documentation to it. https://developers.google.com/maps/documentation/javascript/examples/marker-simple
If I understand your question correctly, This is related to what you are looking for: How do you click on a map and have latitude and longitude fields in a form populated?
Well if you need latitude and longitude everywhere you move you mouse you can do it like this:
google.maps.event.addListener(map,'mousemove', function(event) {
console.log(event.latLng);
$("#inputFormLat").val(event.latlng.lat()); //your input text box (i used jquery here to select it and set its value)
$("#inputFormLon").val(event.latlng.lng());
});
If you have any doubt pls ask
Regards,
Suyash
If you need long/lat coordinates for a polygon or a single point here is a useful tool: Codepen
JS
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var triangleCoords = [
new google.maps.LatLng(33.5362475, -111.9267386),
new google.maps.LatLng(33.5104882, -111.9627875),
new google.maps.LatLng(33.5004686, -111.9027061)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
}
document.getElementById('info').innerHTML = htmlStr;
}
I inserted a polyline snap to road. It works fine.
Now, I'd like to insert another separated polyline snap to road, in the same map. And it doesn't work fine. It systematically joins the end point of the first polyline to the start point of the second polyline.
Thanks for your help.
Here is my code
function initialize() {
var pos = new google.maps.LatLng(-26.431228,-69.572755);
var myOptions = {
zoom: 5,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
ChileTrip1 = [
new google.maps.LatLng(-33.417723,-70.605018),
new google.maps.LatLng(-33.022446,-71.551688)
];
var traceChileTrip1 = new google.maps.Polyline({
path: ChileTrip1,
strokeColor: "red",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceChileTrip1.setPath(snap_path);
}
});
}
//SECOND POLYLINE SNAP TO ROAD
ChileTrip2 = [
new google.maps.LatLng(-29.959694,-71.30825),
new google.maps.LatLng(-32.778038,-71.181908)
];
var traceChileTrip2 = new google.maps.Polyline({
path: ChileTrip2,
strokeColor: "blue",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceChileTrip2.setPath(snap_path);
}
});
}
};
window.onload = function() { initialize();};
The DirectionsService is asynchronous. Either clear the snap_path array inside the callback routine before using it or create 2 separate snap_path arrays:
function initialize() {
var pos = new google.maps.LatLng(-26.431228,-69.572755);
var myOptions = {
zoom: 5,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
ChileTrip1 = [
new google.maps.LatLng(-33.417723,-70.605018),
new google.maps.LatLng(-33.022446,-71.551688)
];
var traceChileTrip1 = new google.maps.Polyline({
path: ChileTrip1,
strokeColor: "red",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path1=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path1 = snap_path1.concat(result.routes[0].overview_path);
traceChileTrip1.setPath(snap_path1);
} else alert("Directions request failed: "+status);
});
}
//SECOND POLYLINE SNAP TO ROAD
ChileTrip2 = [
new google.maps.LatLng(-29.959694,-71.30825),
new google.maps.LatLng(-32.778038,-71.181908)
];
var traceChileTrip2 = new google.maps.Polyline({
path: ChileTrip2,
strokeColor: "blue",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path2=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path2 = snap_path2.concat(result.routes[0].overview_path);
traceChileTrip2.setPath(snap_path2);
} else alert("Directions request failed: "+status);
});
}
};
window.onload = function() { initialize();};
working example
Note that the overview_path is "simplified" and will not necessarily follow the road. If you need the exact route you need to process through all the legs.
Screenshot: http://imageshack.us/a/img59/8541/72825985.png
The above result is delivered by multiple markers(with different radius) on same spot.
I would like to drag a single marker at one time, not multiple markers.
Second, the infowindow is made available for different radius.
Any help is greatly appreciated!
var locations = [
['US gov suggested', 1.8833, 102.7833, 5, 'green', 80000],
['agricultural contamination', 1.8833, 102.7833, 4, 'blue', 60000],
['Chernobyl_Exclusion_Zone (fallout)', 1.8833, 102.7833, 3, 'yellow', 30000],
['Fukushima evacuation zone', 1.8833, 102.7833, 2, 'red', 20000],
['emergency zone', 1.8833, 102.7833, 1, 'black', 5000]
];
and
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: true,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
var circle = new google.maps.Circle({
map: map,
fillColor:locations[i][4],
//fillOpacity:0.3,
//strokeColor:locations[i][4],
strokeOpacity:0.1,
//strokeWeight:1,
radius: locations[i][5] // 30 km
});
circle.bindTo('center', marker, 'position');
}
References:
Google Maps JS API v3 - Simple Multiple Marker Example
http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/circle-overlay/circle-overlay.html?r=67
http://plugins.svn.wordpress.org/google-maps-v3-shortcode-multiple-markers/trunk/
Create as much circles as you want to and bind the center-property of each circle to the position-property of the marker by using the method bindTo() of the circles
var infowindow = new google.maps.InfoWindow()
var marker, i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[0][1], locations[0][2]),
draggable: true,
map: map
});
for (i = 0; i < locations.length; i++) {
var circle = new google.maps.Circle({
map: map,
clickable:true,
fillColor:locations[i][4],
//fillOpacity:0.3,
//strokeColor:locations[i][4],
strokeOpacity:0.1,
//strokeWeight:1,
radius: locations[i][5] // 30 km
});
circle.bindTo('center', marker, 'position');
Secondly, it not easy to add infowindow for multiple circle overlays. Any ideas or hints? For example, http://img443.imageshack.us/img443/8198/overlap.jpg
Reference:google maps v3 adding an info window to a circle
I have the next code which show a path using a polyline. How can I remove it?
downloadUrl("myfile.asp", function(data) {
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var path = [];
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
path.push(point);
}//finish loop
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}); //end download url
I have tried it using the next function but I m not able to make it work.
function removePath() {
polyline.setMap(null)
}
I think the problem is position of the variable "polyline".
var polyline = null;
downloadUrl("myfile.asp", function(data) {
...
polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}); //end download url
function removePath() {
polyline.setMap(null)
}