I'm new in Google Maps and after search and research in forums over the internet i can't get this work. Based on original code from Google Maps i wan´t to draw a polyline map with 2 distinct flightpaths with diferent color also.
Original code i'm trying to change:
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks for helping.
You need another google.maps.Polyline()
...
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
var flightPlanCoordinates2 = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath2 = new google.maps.Polyline({
path: flightPlanCoordinates2,
strokeColor: '#FF00FF',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
flightPath2.setMap(map);
...
Related
I'm a newbie with jsfiddle and can't seem to get my font awesome marker onto this fiddle. Can someone tell me what the problem is please?
<div id="googleMap" style="width:500px;height:380px;"></div>
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
map: map,
icon: {
path: fontawesome.markers.MAP_MARKER,
scale: 0.5,
strokeWeight: 0.2,
strokeColor: '#9300D6',
strokeOpacity: 1,
fillColor: '#D69112',
fillOpacity: 1
}
});
/*var marker = new google.maps.Marker({
position: myCenter,
});*/
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
https://jsfiddle.net/rv2eyexs/1/
Updated JSFiddle
I think you forgot add the fontawesome-marker package to your fiddle source. I updated the JSFiddle and works fine.
https://rawgit.com/nathan-muir/fontawesome-markers/master/fontawesome-markers.min.js
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 draw polygon on my map but i get trouble because it draws a line on center if i formed a square or any shapes.I don't know what makes my polygon draw lines on center.
var map;
var count=0;
var polycolor = '#ED1B24';
var polyarray=[];
function initialize() {
var initial = new google.maps.LatLng(53.199246241276875, -105.76864242553711);
var mapOptions = {
zoom: 16,
center: initial,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
polyarray[count]= e.latLng;
addPolygon(polyarray);
count++;
});
}
function addPolygon(path){
var poly = new google.maps.Polygon({
path: path,
strokeColor: polycolor,
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
here is my jsfiddle
my demo
There is not a line down the center, you are drawing a new polygon for each click.
Make the polygon global, and update the path each time you add a point to it:
var poly = new google.maps.Polygon({
strokeColor: polycolor,
strokeOpacity: 1.0,
strokeWeight: 2
});
function addPolygon(path){
poly.setPath(path);
poly.setMap(map);
}
updated fiddle
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.
I'm working on this project of mine that requires to define lat/lng elements by clicking and finally found a way to do so, but just discovered, that the already predefined elements interfere with the new overlay elements defining by the source below. So I looked and looked, and searched, and googled, but wasn't able to find any helpful info about that: is there a way to make the google maps overlays non-clickable?
I'm using a custom function to get the latitude and longitude of a click event and place a predefined circle overlay object. However if I have already predefined overlay elements, I cannot click on top of them to set a new overlay element. I.e. I'd need either to make them non-interactable or non-clickable, or just to set them on a different layer, so that they don't interfere with the click events for the new elements.
Here's the JS I use:
<script type="text/javascript">
var map;
var markersArray = []; //the array for the newly defined objects
function initMap()
{
var latlng = new google.maps.LatLng(41, 29);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// add a click event handler to the map object
google.maps.event.addListener(map, "click", function(event)
{
// place a marker
placeMarker(event.latLng);
});
// I've predefined a couple of markers just to see how it works with already defined elements and discovered this interference that I mentioned above
var mar1 = new google.maps.LatLng(40.9653, 29.3705);
var marker1 = new google.maps.Circle({
center: mar1,
radius: 2500,
fillColor: "#FF0000",
strokeWeight: 0,
fillOpacity: 0.35,
map: map
});
var mar2 = new google.maps.LatLng(40.9664, 29.3252);
var marker2 = new google.maps.Circle({
center: mar2,
radius: 2500,
fillColor: "#FF0000",
strokeWeight: 0,
fillOpacity: 0.35,
map: map
});
marker1.setMap(map);
marker2.setMap(map);
}
function placeMarker(location) {
// first remove all new markers if there are any, so that we define one new at a time
deleteOverlays();
var new_marker = new google.maps.Circle({
center: location,
radius: 2500,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35,
//position: location,
map: map
});
// add marker in markers array
markersArray.push(new_marker);
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
fiddle
set {clickable: false} in the CircleOptions.
var new_marker = new google.maps.Circle({
center: location,
radius: 2500,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35,
clickable: false, // <=====================
map: map
});
Modified jsfiddle