How can i change the marker icon on directions on google maps?
NOTE: The dirty approach of pure CSS based on the classes ids of container elements is not accepted nor a js search-and-replace the img src.
After expired bounty and lots of research im answering my own question: In Google maps API v3, since 24 June 2014 there seems to be no official way to change these markers.
Possible dirty solutions:
CSS:
set display:none to whatever class the image is, and set a custom background on the parent div. set width and height accordingly.
Click functionality between "directions"-"markers on map" will be maintained, but something as little as a change in the class name returned by the API will cause problems. Not semantically correct as the image displayed is a background of a div, and its not clickable.
JS:
Add a listener and after the directions call, when map is idle, search the markup for the image and replace the img src. Will fail if markup returned from API is changed since you have to select by id, class name or something similar.
JS:
Scrap the data, and re-render as you wish. Click functionality between "directions"-"markers on map" of course is lost, and still unstable since is based on scrapping.
In any of the above cases you ll have to suppress markers in markerOptions and also change the marker that is used as point "A" and point "B" to match your dirty solution result.
Will be more than happy to see a better answer than this.
Related
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
When I search any thing in input Search and zoom out (ctrl/-) on my website , place of result of search will be change ! How I should fix it that result of search open bottom of input search exactly ?
My url : link of my website and it's pic of result of search : pic of my website
Looking at your website it seems that you have a script which generates the results using absolute positioning after results are loaded. Upon zooming out the absolute positioning is no longer relevant.
If it were possible, a solution would have been to listen for the browser's zoom event and recalculate this, however there is currently no way to do that. More information about that in this SO question: Catch browser's "zoom" event in JavaScript
The ideal solution would be to change the structure of your dropdown to not need absolute positioning if you want to handle this scenario.
Alternatively, you can keep searching for ways to listen to the zoom event and update the positioning of your dropdown using the search input's left offset.
I have been trying to disable scroll bars in a text area using the code:
ScrollBar scrollBarv = (ScrollBar)textArea.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
But all I get is a null pointer for "scrollBarv". What am I missing?
You can't disable a scroll bar in a text area via lookups like you are trying to do.
A lookup is CSS based, which usually means it will only work after a CSS application pass has been applied. Generally, for a lookup to work as expected, a layout pass also needs to be applied on the parent node or scene. The logic in the JavaFX layout handlers for complex nodes such as controls may modify the CSS and nodes for the controls.
To understand how to apply CSS and perform a layout pass, read the relevant applyCss() documentation.
So you could do this:
textArea.applyCss();
textArea.layout();
ScrollBar scrollBarv = (ScrollBar)textArea.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
But even then, it would not do what you want. Because it is just a one-time call. If the user types new text into an empty TextArea until it fills the area, then a scroll bar will show up, and if the user deletes text in the text area, the scroll bar will be removed. And the new scroll bar which shows up wouldn't be found when you did your lookup because it would not have existed at that time.
Generally, the preferred alternative to performing lookups to nodes is to apply CSS style classes with the style class defining the desired attributes of the node regardless of the state it is in (and using psuedo-classes if state based CSS definitions are required). However, that probably won't work in this case as I can't see a definition for a disable attribute in the JavaFX CSS reference guide. Perhaps you might manage what you need via the visibility property, though that is unlikely as visibility is a bit different from disable.
The behavior for controlling the scroll bars is internally coded in the TextAreaSkin (which in Java 8 is not part of the public JavaFX API). You could copy or subclass the TextAreaSkin to customize its behavior and then attach your customized skin to your node. This is really the "proper" way to customize internal control behavior in the way in which you wish. A discussion of the detailed steps to achieve this is outside the scope of this answer.
But, in the end, I'm not sure how useful the behavior you desire is. Rather than disabling the vertical scroll bar, you could just disable the entire TextArea, which would be fine for most similar use-cases. Though, perhaps your use-case is different somehow in requiring only the vertical scroll bar to be disabled.
Based on my research and the many posts on this subject, I understand that I cannot alter the CSS in the iframe based on the domain tree security policy. However, I am sure (or hope) there has to be a developer out there that has implemented a way to run the iframe locally on their domain and therefor gain access to alter the CSS attributes.
All I need to do is change the calendar grid (array) background and border colors. Please do not tell me you can change the bg-color in the tool, because all that does is change the header. The border is blue and the bg-color of the grid is defaulted to white.
Any direction would be much appreciated.
Look at this:
http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
It is described there how to change google calendar css.
i'm trying to use overlays on a custom google StreetView Panorama.
I was able to simply put one on my pano, but the position is totally random (i made some attempts until the effect was alright), and the change of rendering mode (in chrome which renders as a sphere) changes the effect.
The problem is clear: the custom panorama has no information about its dimensions (it has only a LatLng), so the relative positions are wrong.
Am i missing something?
The only thing i need is to put some clickable labels on the walls of a room, which modify themselves along with the rotating panorama. I searched a lot, but my efforts were inconclusive.
Mapsicle seemed to do what i needed, but if i understood correcly it's a dead project.