How can I set the colour of a Google Maps Polyline?
var myRoutePath;
myRoutePath = new google.maps.Polyline({
path: routeCoordinates,
strokeColor: "#CC33FF",
strokeWeight: 3
});
myRoutePath.setMap(map);
// Reset colour
myRoutePath.setOptions({strokeColor: 'blue'});
The above doesn't show up as an error in Firebug, but it doesn't change the color either.
Thanks for your help.
Basically looks correct to me. However, if this is your code verbatim then you immediately overwrite the color. Hence, I guess you are getting a blue polyline from the start. Try setting a timer to see the transition:
setTimeout(function () {
myRoutePath.setOptions({strokeColor: 'blue'});
}, 3000);
Color names are still not supported as a color, use the hex version instead
myRoutePath.setOptions({strokeColor: '#0000FF'});
Related
Vue 3 google map circle is not being removed from the map
I am currently migrating from Vue 2 to Vue 3.
In Vue 2 I could remove circles,
but in Vue 3 I run into the problem that the circles first disappear when removed.
But when zoom-in and zoom-out they reappear.
I do use the .setMap(null) method for removing the circles.
I use the circles to show a geofence for a POI (point of interest) and
This geofence also has a marker in the centre and I can remove the marker without any problems.
Has anyone else encountered the same problem?
Is this a problem people also run into in other frameworks?
How I create the map circles and markers
public LoadPoiMarkersAgain (
googleMapLoader: IGoogleMapLoader
): HTMLMapMarker[] {
const markers: HTMLMapMarker[] = []
for (let i = 0; i < googleMapLoader.mapPoiData.length; i++) {
const marker = createHTMLMapMarker({
latlng: new google.maps.LatLng(
{
lat: googleMapLoader.mapPoiData[i].latitude,
lng: googleMapLoader.mapPoiData[i].longitude
},
null,
true
),
map: googleMapLoader.map,
data: googleMapLoader.mapPoiData[i],
html: this.CreatePoiMarkerHTML(
googleMapLoader,
googleMapLoader.mapPoiData[i]
)
})
const markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: googleMapLoader.map,
center: new google.maps.LatLng(
{
lat: googleMapLoader.mapPoiData[i].latitude,
lng: googleMapLoader.mapPoiData[i].longitude
},
null,
true
),
radius: googleMapLoader.mapPoiData[i].radius
})
this.AddClickListenerToPoiMarker(marker, map)
markers.push(marker)
markerCircle.set('poiId', googleMapLoader.mapPoiData[i].poiId)
googleMapLoader.mapCircles.push(markerCircle)
}
return markers
}
How I remove the circles
public RemoveMapMarkersData (
googleMapLoader: IGoogleMapLoader
): void {
if (googleMapLoader.mapCircles.length > 0) {
googleMapLoader.mapCircles.forEach(
(element: google.maps.Circle) => {
element.setMap(null)
}
)
googleMapLoader.mapCircles = []
}
// Some more code to remove markers
}
What i have tried
attempt 1
I tried using
element.setVisible(false)
This does not work either.
attempt 2
I tried changing the order for when the circle is removed versus the marker.
This does not work either.
attempt 3
I also tried removing the circle
Immediately after, I added them to the map.
That does seem to work.
public LoadPoiMarkersAgain (
googleMapLoader: IGoogleMapLoader
): HTMLMapMarker[] {
// previous code
googleMapLoader.mapCircles.forEach((circle: google.maps.Circle) => {
circle.setMap(null)
})
// previous code
}
Could it be that Vue 3,
Is not passing the references correctly to my method?
Package
enter link description here
Google documentation
Google docs remove circle
Google docs remove marker
Extra
I have a gif that demonstrates the problem.
When I drag the map it should remove the circle.
But when zooming in and out, the circle reappears.
https://i.gyazo.com/b7310cc4d748da36e026104aff6cb2fe.gif
I have also created two sandboxes to demonstrate the problem:
(When you move your mouse out of the map, the circles will be removed)
Vue 2
Vue 2 + google maps
Vue 3
Vue 3 + google maps
I believe I encountered the same issue whilst migrating from Vue 2 to Vue 3, where markers were successfully being removed upon setVisible(false) but were then reappearing upon zoom.
Seeing console errors relating to Proxy led me to believe that the cause of the issue was due to the differences in the reactivity systems of Vue 2 and Vue 3 (helpful article on Vue 3 reactivity).
For me the fix was to use markRaw() when creating the map, which essentially returns the Map Object itself without converting to a proxy.
<script>
import { markRaw } from 'vue'
export default {
methods: {
initMap () {
map = markRaw(new google.maps.Map(document.getElementById("map"), {...}))
}
}
}
</script>
Sadly enough I could not fix the problem in proper way,
but I have a place holder solution for now.
My place holder solution is to remove the map when removing the circles and markers. After removing the map I render / reinitialise the map again.
Vue 3 - remove map when removing circles
If I can remove the circles and markers as intended by google,
Then I will post an update on this again.
I want to animate (fadein, fadeout) a marker in my GoogleMaps application (Web).
How can i assign any css class to a marker?
Or how can i access the specific marker? Do they have selectors like :after or something?
If not, whats the easiest way of applying animations to them?
The DOMNode that contains the image used for the marker isn't available via the API.
Furthermore, by default the markers will not be single DOMNodes, they will be drawn via canvas.
But the Marker-Image may be accessible via CSS when you use a unique icon-URL for each Marker.
Sample(using jQuery):
<style type="text/css">
img[src^='http://www.google.com/mapfiles/marker.png?i=']{
opacity: 0.5
}
</style>
<script type="text/javascript">
function initialize() {
var index=0;
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
marker=new google.maps.Marker({position:map.getCenter(),
map:map,optimized:false,
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)});
google.maps.event.addListener(marker,'mouseover',function(){
$('img[src="'+this.icon+'"]').stop().animate({opacity:1});
});
google.maps.event.addListener(marker,'mouseout',function(){
$('img[src="'+this.icon+'"]').stop().animate({opacity:.5});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
How ist works:
The sample uses a single image as Marker-Icon (http://www.google.com/mapfiles/marker.png)
via CSS we apply a opacity. You may notice that there is a i-parameter inside the URL. This parameter will be used to make the img-src unique.
I use a variable which will be incremented to get a unique img-src:
var index=0;
//a few lines later:
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)
Now you'll be able to select the <img/>-element used for the marker, e.g. onmouseover/onmouseout via a attribute-selector.
When you wan't to use vanilla javascript you may use document.querySelector to access the image.
Note: you must set the optimized-option of the marker to false (this will force the API to render the marker as a single element)
Demo: http://jsfiddle.net/doktormolle/nBsh4/
There is a trick that can work if you for example want to change the cursor for the marker
Add this:
google.maps.event.addListener(YOURMARKER,'mouseover',function(){$(".gm-style div").addClass("markerClass")});
google.maps.event.addListener(YOURMARKER,'mouseout',function(){$(".gm-style div").removeClass("markerClass")});
and
#YOUR-CANVAS .gm-style div {cursor: default !important;}
#YOUR-CANVAS .gm-style div.markerClass{cursor:pointer !important}
works like a charm
An easy way is, select the marker and add a class the that selection.But for that you have to give each marker a title. Any animation would not work except google ones.
$("div[title=\"" + name+ "\"]").addClass("aClass")
I hope this helps someone.
I began to use Google Map API recently and I tried the hello world sample in my own webpage. The only difference of my code from the original one is I display the map element in javascript code like this:
function showMap () {
container = document.getElementById("id_container");
container.innerHTML = "<div id=\"map_canvas\"><\/div>";
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
And in the external css file, I defined the width and height by fixed values for #map_canvas.
But I didn't get the expected result. The map showed for about 1 second and became all white (see the image below). When I zoom the map, I can see it flashing. I have searched on Google but I didn't get any solution and I don't even know what the problem is. Has anyone encountered the same problem before?
After several days' trying, I know what's happening --
I set the background attribute of all divs to be white. Though I reset the background of the map div to be "none", it doesn't work. The only solution is to avoid any definitions that would possibly give it a not "none" background, like "div {background-color: white;}".
However, feel free to set the background color of its parent tags.
Help!
Essentially what I'm trying to do is use the "Use color specified in a column" option from the configure map styles UI in the API, a "hopeful" workaround of the google 5 category limit.
I have a field of colors that define the different categories and I want to set to individual polygons to the color set in that field. I have a listener and the concept works perfect for the polygon clicked, however it only changes the clicked polygon, it doesn't work the same for the other polygons. I'm pretty new to javascript/sql and fusion tables so I can imagine I'm doing a lot of things wrong, but luckily most of it has been working for the most part. Below is the general idea of what I'm trying to do:
google.maps.event.addListener(layer, "click", function(e) {
var county = e.row["name"].value;
suppressInfoWindows:true
layer.setOptions({
query: {
select: 'geometry',
from: '3609287'
},
styles: [{
polygonOptions : {
fillColor: row["PerChngColor"].value
},
where: "name = " + county,
polygonOptions : {<br/>
strokeColor: "#FF9900",
strokeWeight: 5,<br/>
fillColor: String(e.row["PerChngColor"].value)
}
}]
});
});
The first fillColor:row["PerChngColor"].value is really what I'm trying to get work. It is "supposed" to set the color for the polygon. The second one works great. Any suggestions on how to fix this would be greatly appreciated.
Thanks,
Keith W
There are quite a few syntax errors in the code you posted, not sure if that's the issue. But ...
suppressInfoWindows: true.
This should throw a JS syntax error. As should
polygonOption: {<br/>`
...
strokeWeight: 5,<br/>
Finally, the line where you have.
fillColor: row["PerChngColor"].value
Should probably be:
fillColor: e.row["PerChngColor"].value
I'm trying to figure out how to stylize (I really just want to change colors) the adUnit created through google maps V3. Is there no standard way to do this? most adsense ads you can stylize internally, but it is looking to me like I am stuck with the ugly blue background.
It seems like there should be a way to do this, given that you are now able to place the maps adunits outside of the map.
Thanks!
I also searched for a solution, none found. I think they don't want you to mess with the colors, it has to blend nicely with the map colors itself.
https://developers.google.com/maps/documentation/javascript/advertising?hl=en#AdUnitAdStyles
var adUnitDiv = document.createElement('div');
var adUnitOptions = {
format: google.maps.adsense.AdFormat.HALF_BANNER,
position: google.maps.ControlPosition.TOP,
backgroundColor: '#c4d4f3',
borderColor: '#e5ecf9',
titleColor: '#0000cc',
textColor: '#000000',
urlColor: '#009900',
map: map,
visible: true,
publisherId: 'YOUR_PUBLISHER_ID'
}
adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
Is this what you needet?