I want to create two google maps api overlays such that one overlay is containing another small overlay.And another small overlay should be transparent. Like a donut. But I could not create such shape because if I make inner overlay transparent then outer overlay fill the color. I want to make such type of shape on google map-
It may be circle or polygon. I tried this but not working for me.
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: latlng,
radius: 100000,
editable: true,
zIndex:100
};
cityCircle = new google.maps.Circle(populationOptions);
var populationOptions1 = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#ccffcc",
fillOpacity: 0.00,
map: map,
center: latlng,
radius: 10000,
editable: true,
zIndex:1000
};
cityCircle1 = new google.maps.Circle(populationOptions1);
How to achieve this shape on google map that blue area will colored and white area will transparent?
Thanks in advance..
Finally I found my answer. this link was very useful. It works for me...
Another example of a "donut" polygon, the key being the winding direction of the path of the inner "hole" path needs to be opposite that of the outer path.
Related
I am getting stuck when trying to set google map's polyline icon on the center of a line.
I am using a custom car icon which is not getting set properly on the polyline that I am drawing on the map. Please see the screenshot:
If I use the icon provided by the Google API by using path (path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW) it shows on the center of the line.
Please see the below image:
How can we set the car icon on the middle of the line? Please check the sample code here.
For the car icon I am using the below code, is anything needed to be modified here?
var iconsetngs = {
path: 'M25.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759' +
'c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z' +
'M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713' +
'v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336' +
'h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805z',
fillColor: 'blue',
fillOpacity: 1,
scale: 0.4,
strokeColor: 'gray',
strokeWeight: 0.4,
offset: '50%'
};
var polyOptions = new google.maps.Polyline({
path: path,
strokeColor: '#0c0bbb',
strokeWeight: 1.5,
map: this.map,
icons: [{
icon: iconsetngs,
repeat: '70px',
}]
});
polyOptions.setMap(this.map);
You will need to modify the anchor point of the icon. In the fork of your example I have added anchor: new google.maps.Point(23, 0), there are some details of the extra poperties available under Complex icons in the Google Maps documentation.
I am having an issue with layered markers in the Google Maps API when trying to open an InfoWindow on mouseover. I have created a sample fiddle using Google's Complex Items documentation example.
The beachflag marker is a complex shape and uses a 'poly' element to define the area for the mouseover. This allows the mouseover to only appear when the cursor is on the upper half of the img where the flag part actually is.
var map_marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.890542, 151.274856),
map: map,
shape: {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
},
zIndex: 101,
optimized: false,
icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
});
The circle marker is situated behind the flag and is intended to be overlapped by the flag.
var map_marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.890542, 151.274856),
map: map,
zIndex: 100,
optimized: false,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "#0FF",
fillOpacity: 1,
strokeWeight: 1.5,
scale: 40
}
});
I have a mouseover event displaying an InfoWindow for both markers but the problem lies in the small area underneath the flag marker polygon, there is a void where the circle InfoWindow is expected to be show, but doesn't.
One possible resolution to this is to turn the circle marker into a straight Circle, however I need my circle to be a fixed size and not scale with my zoom level.
How can I see the lower-level marker through the upper-level marker's "empty space" outside of its defined poly shape, and correctly display the mouseover InfoWindow?
I am currently trying to implement semantic zooming similar to the way shown in Mike Bostock demonstrates in this d3 example with the circle markers in the javascript google maps api. I cannot figure out how to change styles (radius, opacity) of these markers after they have already been created on the zoom action. Is there a way to do this without removing them and then recreating them with a different size?
// Overlay for eruptions
for (var eruption in eruptions) {
var coordinates = new google.maps.LatLng(eruptions[eruption].Latitude, eruptions[eruption].Longitude);
var eruptionCircle = new google.maps.Circle({
class: 'marker eruption',
strokeColor: ERUPTION_COLOR,
strokeOpacity: marker_border_opacity(),
strokeWeight: 2,
fillColor: ERUPTION_COLOR,
fillOpacity: marker_opacity(),
map: map,
center: coordinates,
radius: eruption_size(eruptions[eruption].VEI),
});
ERUPTIONS.push(eruptionCircle);
}
map.addListener('zoom_changed', function() {
var zoomLevel = map.getZoom();
// TODO - need to find a way of semantically zooming on these markers
});
You can use setOption
eruptionCircle.setOptions({radius: eruption_size(yourNewRadius)});
You have a mistake too (remove the last , form option this way
var eruptionCircle = new google.maps.Circle({
class: 'marker eruption',
strokeColor: ERUPTION_COLOR,
strokeOpacity: marker_border_opacity(),
strokeWeight: 2,
fillColor: ERUPTION_COLOR,
fillOpacity: marker_opacity(),
map: map,
center: coordinates,
radius: eruption_size(eruptions[eruption].VEI)
});
We get 4 latitude and 4 longitude.We drag line between points using Polyline
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates2,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
We Add Image on points like this
var image ='../images/shopimageformapsyellow.png';
var marker = new google.maps.Marker({
position:mapCenter,
map: map,
icon: image
});
Working fine But 4 points have one image like yellow color image.We need Start and Ended point redcolor image and remaining Yellow color image.Please guide me any one how to place first point and last point have different image
We tried like this
var icons1 = {
start: new google.maps.MarkerImage('../images/startRed.png'),
end: new google.maps.MarkerImage('../images/startGreen.png')
};
flightPath = new google.maps.Polyline({
icons: [{
icon: icons1,
}],
path: flightPlanCoordinates2,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
flightPath.setMap(map);
But we don't have luck Please any one guide me
I would recommend you to use Leaflet which is a open source Javascript library for Mobile Friendly interactive maps.
With that you can have custom image for markers and also alternative colors for marker images.
Please refer to the following link for more details.
Hope that Helps!!
First post here, usually a reader not a poster but here goes!
Having a bit of trouble with 'click' events using the Google Maps API.
Here's the scenario:
Marker is placed on map, click event added to marker, works fine.
Another marker is added to the map directly on top of the existing marker with no click event. The click event for the original marker now no longer works! However, if I change the 'click' event to a 'mouseover' it works fine.
Code for first Marker:
var marker1 = new google.maps.Marker({
position: marker1[0],
map: map,
draggable: false,
icon: new google.maps.MarkerImage('img/' + type + '.png',
new google.maps.Size(16, 16),
new google.maps.Point(0,0),
new google.maps.Point(8, 8)
)
});
Code for Marker that gets overlayed on existing marker:
var marker2 = new google.maps.Marker({
position: position,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#72008F',
strokeWeight: 3.0,
scale: 10
}
});
Code for Listener:
google.maps.event.addListener(marker, 'click', function(event) {
$("#IDhere").html("Some HTML here");
});
I solved my problem by way of work-around.
The issue as I see it was that defining the 'clickable' marker using "new google.maps.MarkerImage" made it part of the google maps canvas element.
Then when Markers defined using "google.maps.SymbolPath.CIRCLE" came along and were put on top of the clickable marker they are separate elements confined into Divs layered on top of the map Canvas element.
Therefor as #geocodezip rightly pointed out, the clickable marker (part of google maps canvas) was being hidden by the other marker in its Div.
My solution was to change the way i created the clickable marker. I used another Circle Symbol path and gave it a zIndex of 99999 so always on top.
Marker1 now looks like this
var marker = new google.maps.Marker({
position: marker1[0],
map: map,
draggable: false,
zIndex: 99999,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: type,
strokeOpacity: 1,
strokeColor: '#000',
strokeWeight: 1 ,
scale: 5
}
});