I have a google map where I load geometry data* to the data layer using addGeoJson. Everything works fine until i tried to bind an event on polygons in order to change opactiy settings.
*I retreive city borders from OSM to draw polygons, I think my json object is well formatted, I took Google as reference : https://storage.googleapis.com/mapsdevsite/json/google.json
As soon as I click on a polygon (any of them), it seems to duplicates my polygons anywhere around however the opacity change correctly.
I used this as exemple for my code : https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic
Here is my JSFiddle : https://jsfiddle.net/fmarrot/k7b57egw/ (the data can be seen in console.log(Config.polygon) (line 10)
Indeed if i comment line 29 to 31, no problem at all, but I can't change polygon opacity anymore.
map.data.addListener('click', function(event) {
event.feature.setProperty('opacity', (event.feature.getProperty('opacity')===0.5?0.9:0.5));
});
Any idea of what I am doing wrong ?
Thanks for your help !
Ok I think I figured out, it seems to be a Chrome bug (my version 58.0.3029.110 (64-bit)), I've just tested it with Firefox, Edge and IE with no problems > no polygons duplications on polygon click and works like a charm !
I am gonna wait for a chrome fix or if someone have a solution I would appreciate any suggestions !
UPDATE
As stated in Google issue tracker, the issue was fixed in Chrome 60. The corresponding bug was marked as Fixed on August 9, 2017.
https://buganizer.corp.google.com/issues/38211242
Related
I have a KML file from an architect who says he colorized the lines (white, blue, red) and I see the codes in the file itself so I know they are there. The proper colors do display in Google Earth, but NOT in google maps http://lonesomevalley.com/site-map-mapbox/ that I added as a KML layer into MapBox. They also don't display when I bring into the Geojson.io tool so something must be wrong. I see that color is supported by google maps so wondering why it isn't working. Please help! Thanks in advance! My code can be downloaded here: http://evolv.com/lonesome.kml
If I understand the question right, it was the same problem like I had for quit a while. Then someone gave me this quit simple solution.
The colorcodes in kml are in BGR format, while most other formats are the usual RGB format.
The conversion is quit simple: RGB 'ff12dd' will be in BGR 'dd12ff' (R and B just change) but in kml there must always be 'FF' in front, so it will be 'FFdd12ff'
I can't tell you if it's the same issue on your mapbox-implementation(mapbox isn't google maps)
The colors also will not be applied in a google.maps.KmlLayer
The issue seems to be that you've placed the <Style/>'s in <Folder/>'s
When you validate the KML ( http://www.kmlvalidator.com/home ) you'll see that the styles may not be found(and more errors) .
Possible solution( at least related to google-maps): Place the Styles outside of the Folders, as direct childs of <Document/>
Okay after much trial and error working within the KML file, I finally consulted an expert who gave me a simple answer that worked! He said the easiest way to go about changing line colors and weight is through MapBox Editor itself. All you have to do is click on the Data tab, then the 3 horizontal lines button ("hamburger menu drawer icon") to bring up the features. Then you can delete any feature you want from there or click on the feature to change its stroke color and weight. So EASY!!! Just be sure to hit save when done. And there is no Undo if you trash something by mistake so make sure to Save every once in a while and just back out of the project without saving in order to get back something you deleted by mistake.
So all in all I believe that KML files don't bring in the colors of lines correctly to MapBox and therefore need to be corrected through the editor itself.
I have a map which calls the Gabriel Schneider StyledMarker code.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js
Since today they now behave differently on maps and the example code does not behave as predicted.
Previously you could add bubble markers with 'A' and 'B' shown as the text. Now the first one shows 'A' if created on its own, but if a second marker is added with 'B' as the text the first one also changes to 'B'. (Similarly colours are changed).
Use his simple example to display the problem
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/examples/simple.htm
the three markers should be different.
Anyone know how to fix this?
As of Nov 26, 2012 a partial fix was made to StyledMarker.js to make it work better with API v3.10.
The link:
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
However it only fixes 2 out of 3 problems:
Color of marker and text in marker now work fine with v3.10
However the size of the marker is still overwritten with each additional marker added.
I updated the bug report in the Google Maps API v3 issue tracker for this and hope it will be fixed as well soon.
A new version of the Google Maps API v3 was released. If you specify version 3.9, it still works:
http://www.geocodezip.com/v3_styledmarker_examples_simple_v39.html
v3.10 does not work:
https://developers.google.com/maps/documentation/javascript/basics#Versioning
Which will be an issue for anyone using this library when v3.9 is retired in about 6 months, unless v3.10 and 3.11 get fixed...
Created issue in the Google Maps API v3 issue tracker
Just started getting an error in one of our Google Maps API pages. It has been working fine, it was working last week, but I tested it this morning and it's not working in Chrome.
Link to the page:
http://www.stroud.gov.uk/whereilive/index.asp?uprn=010014280260&postcode=GL5+4UB&page=planning
There should be a number of markers, and a circle on the map, but these do not appear.
I get the following error in the console:
Uncaught SyntaxError: Unexpected token ILLEGAL maps.gstatic.com/cat_js/intl/en_gb/mapfiles/api-3/9/2/%7Bcommon,map,util,infowindow,marker,poly%7D.js:6
Looking at this points to this Google function:
google.maps.__gjsload__('poly', 'function...
My first thought was "I'm not drawing any polygons/lines etc" but then I realised I'm drawing a circle.
This happens in the DrawCircle function at line 263 in whereilive_google_maps_live_v3.js which is using the standard google.maps.Circle function.
If I remove the call to DrawCircle then the page loads and shows the markers.
This only happens in Chrome. Also tested in IE9/8/7, Firefox 13, Opera and Safari and all work fine and draw the circle.
The code has not changed, and was working up to the end of last week in all browsers including Chrome.
Are others having the same problem, or any ideas?
Cheers,
Mike
I have a google map that adds multiple markers on it and the InfoWindow contains some custom html in it. (here is a live example)
The map and its markers show fine in all browsers except Internet Explorer. The markers never show. However, the funny thing is, if I press F12, get in developer mode to try to figure out what is going on, the markers show just fine. Then I exit developer mode and it still shows just fine.
Has anyone else ran into a similar situation? I have no idea what to do to make the marker show the first time. (I tried adding a timeout to give the maps time to load before adding the markers, but that didn't work)
Simple answer, not intuitive. Comment out console.log in the file /static//places/js/google_maps.js. I tested in IE 9.
In my case the problem was that the link to create the marker is not found in IE:
new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|");
I changed that link for that, and found it!
new google.maps.MarkerImage("http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|");
Note the difference in the base URL.
I am using GeoServer for extracting polygons from shapefile then I use them with OpenLayers JS API and project them on Google maps base layer. All set, everything works fine.
I display 2 WMS layers over Google maps base layer, they looks fine in print preview in all browsers but when I print them
FireFox: Got correct print, all the layers printed correctly.
IE/Chrome: only last layer added to map is printed if its not gmap layer.
map.addLayers([gmap, wms1, wms2, vectors]);
here the polygon from wms2 is printed, if I switch them then wms1 is printed and google layer is never printed (even if I put that in last).
Please suggest if you know any workaround or any problem in the way I am doing it. I have already checked advanced option in IE to print image and background but no effect.
Thank you.
Anybody?
Solved.
The problem was with 'opacity': 0.80 parameter while getting polygon from both WMS layers.Although I don't know it for sure but it's the problem with printing Opaque images in IE/Chrome.
In case anybody face the same problem, don't use opacity.