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)
});
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.
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!!
I am using the Google Maps JavaScript API to create a heatmap layer. I would like to add mouseover events to 100+ locations on the map that will display an infowindow. This would get pretty cluttered if I used markers for every event, so I was hoping to find a way to eliminate markers altogether (although I did throw together an ugly mess of a solution in which a button will show/hide those markers). My first thought was to use the LatLngBounds. As a simple example:
var infowindow = new google.maps.InfoWindow(
{ content: "some info",
size: new google.maps.Size(50,50)
});
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
google.maps.event.addListener(loc, 'mouseover', function() {
infowindow.open(map);
});
google.maps.event.addListener(loc, 'mouseout', function() {
infowindow.close();
});
For whatever reason, though, the mouseover event never seems to happen. Is there a problem with the code? Is there a better way to do this than by using LatLngBounds?
First of all, you should make a new rectangle with your bounds:
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
var rectangle = new google.maps.Rectangle({
bounds: loc,
editable: false,
draggable: false,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
rectangle.setMap(map);
And then just use an event listener on that rectangle
google.maps.event.addListener(rectangle, 'mouseover', openInfoWindow);
function openInfoWindow(event) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
var content = 'Infowindow content';
// Set the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(ne);
infoWindow.open(map);
}
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
}
});
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.