How to give marker a z-index wild-googlemaps - javascript

Probably impossible without using an API, but I'm going to ask anyway because it would save me so much pain and tears.
Is there a way to give a googlemaps marker a z-index without using the API? I've got the plug-in called Wild-Googlemaps implemented on my wordpress site. And I've created a googlemaps div, with an overlaying div set to opacity:0.7 for styling purposes.
Now I've lost the ability to click the marker, so I need to somehow change its z-index.
Anyone had this problem or has any ideas? Much appreciated.
Thanks in advance.

You cannot do that without accessing API.
By default all markers are created as a part of a map canvas and you cannot access them (they don't belong to the DOM tree). You could do that after turning off optimized parameter passed during creation of the marker (take a look at
description of marker parameters), but this require access to API.

Related

How can I get information about a clicked marker which was not added via overlay?

I have a question regarding the markers on the primefaces gmap element.
By now I have read up a lot about what is possible, and I found out that one can add custom markers to the map, as well as listen for their clicks and so on.
However, I want to be able to listen to clicks on one of the default markers google maps already provides.
For example:
I, as a user, would move around the map, looking for a restaurant to dine tonight. I find a marker for a restaurant I am interested in and which I want to know more about. As soon as I click it, the application - in this case my Java bean - should get information about the clicked marker.
It might not have to be all the information possible, but at least the position, name etc. so I can get information about the place with another google API.
Is there a possiblity to achieve this?
Some objects within the Maps API are designed to respond to user events such as your concern with clicking a marker and getting information about the clicked marker. To achieve it, you have to integrate JavaScript which is active in the browser side with your JavaBeans which is active at server side to get the possible information for the clicked marker.
Using JavaScript, you can add interactions by generating events and add event listeners to execute code when those specified events occur.
A very good example showing how your concern can be properly achieved by adding a marker and keeping client side representation in sync with the server side model can be found in GMap - Adding Markers.

Managing Image Map, managing interaction with the area maps

I'm currently working to develop a real estate website for a client. The client is stuck with the idea to create something like this :
http://woodfield-sillery.com/plans/
Basically, I'm looking to find a way to recreate the same thing, technically it would require :
Managing image map behaviour (to be able to react to mouseover)
Managing the onclick to open a view of the selected floor
Once selected, a second map would show of the floor, with available condos
Then onclick again, it would show pricing, availability, etc.
I'm having trouble managing the rollover image map through CSS.
Besides that, of course, the client would want to manage all by himself (so he can update the condo statuses), and I was planning to host the website through Wordpress
Questions :
Has anyone worked on a solution like this and would be willing to share experience?
Has anyone come across a Wordpress solution that works this?
Has anyone have a technical solution for this (Javascript, HTML5, CSS combined?)
I'm the author of MapSVG WordPress / jQuery plugin which is able to do what you need: http://mapsvg.com
To get started you would need to create a blank image in any vector editor (InkScape, Adobe Illustator, etc.). Then embed building image (png/jpeg) to the background. Then add shapes on top of the image and give them a transparent color fill (=rgba(0,0,0,0)). Save image as SVG, upload it to MapSVG map builder.
Everything else will be done in MapSVG Builder - colors, tooltips, popovers, links, event handlers, etc. See the demo.
you can use maphilight plugin
or you can use jvector
tutorial use link

Toggle Bing Maps Dashboard

Is there any way to toggle the bing maps dashboard('showDashboard' option) using the api v7?
I know that it can be set in the constructor, but I want to be able to show/hide this dashboard after the map is rendered and i dont want to recreate the map every time a user wants to show or hide the controlls.
I tried using:
map.setOptions({showDashboard : userOption})
but it doesnt work.
In the documentation it states that "This property can only be set when using the Map constructor.", but I'm still hoping for a solution/hack....even tho i've been searching for a solution all over the internet.
Thanks in advance.
Cheers!
I think you cannon achieve this through API.
The best solution is to control this manually after the maps loaded
Just use
$(".MicrosoftNav").style.visibility = "hidden" // To hide the nav bar
Or
$(".MicrosoftNav").style.visibility = "visible" // To show the nav bar
I suppose the bing will not change the class of "MicrosoftNav", but who knows...
I ended up recreating the map on each show/hide action and it seems to work ok, but it would have been nice if there was a way of doing this without having to destroy and render the map again....i know for a fact that this can be done in gmaps.

Suggestion for creating tooltips on an image

Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.

Yahoo Maps Setting Smartwindow Dimensions

I am looking to be able to change the dimensions of smartwindows I have set to appear whenever a given marker is clicked. The default sizing mechanism is not producing windows that are wide enough. Checked the Yahoo Maps API but couldnt find any way to pass dimensions to a smart window. Is it even possible?
couldnt find any solution that would pass parameters to the smartwindow function, but in any case i managed a workaround by setting CSS styles for the html elements i was rendering inside the smart windows. how the dimensions for a smart window are calculated without specifying dimensions for elements within the window is still unclear to me (as it did not reflect standard styling) so in any case if anyone has a more elegant solution additions are still welcome.

Categories

Resources