Clustering in Google Maps - javascript

I have developed an application using google maps v3. Here, I need to show some markers at the initial zoom level. The problem is on mouseover of the marker, I need to show a div content. The div is not properly aligned, that is for the marker on the extreme left or right, the div is getting partly hidden. How do I show the div with proper alignment viz., inside the map itself? could someone help me with this please? Thanks in advance.

First get the size of the map canvas div, then capture the x coordinates of the marker.
For the mouseover event, write a conditional statement so that if the marker's x coordinate are too close to the left edge, add extra pixels to the x coordinate of the floating div so the floating div shifts to the right to go inside the map canvas. (If the marker is too close to the right edge, reduce the value of x coordinate by certain pixel so that the floating div shifts to the left a bit.)
How much to add or reduce the value of x coordinates depend on how big the floating div is.

Related

Openlayers 3 map, how refresh without having focus

I have two similar problems with an Openlayers 3 map. They both pertain to making the map refresh/redraw when it doesn't have focus; i.e. when the mouse is not over it.
1) I show an outline of a country when the mouse is over it, but it becomes transparent when the mouse moves off. However, if the country is at the edge of the map view and I move the mouse off that edge of the map, the country stays outlined, because the map never sees the mouse over another area outside the country.
2) When I click on a country, it becomes permanently highlighted (i.e. a layer becomes visible). I have a button off the map that when clicked resets all the layers to transparent. When I click the button, nothing happens until I move the mouse back over the map, at which point the change becomes apparent and the layers disappear.
Is there a way to force the map to update when the mouse is not over it?
I have tried several options: map.redraw(), layer.redraw(), source.refresh(), map.refresh(), layer.refresh(), source.refresh(), document.getElementById("map").focus() and anything else I can find suggested to force a map to refresh, but none of them work until the mouse is moved over the map.
My mistake, simple bug. Failed to update the style directly, assuming another routine was handling it.

Keeping rectangle in place after rotating

I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!

Google maps, set space for overlays

let´s say this is the very right of my google map :
i have a box with opacity there containing information, i wonder if there was a way
to let overlays like markers not appear behind the box or define an area for them or add an overall overlay margin padding or sth like let google scroll the map until the infowindow is in full sight as google does when its not on the map
maybe someone has an opinion to this?
could there be an easy overridal?
for any hint
thanks in advance
create a custom control at control-position RIGHT_CENTER with a width equal to the width of the box and a height of 0.
With the height of 0 this control will be hidden, but the API will still recognize this control and will try to pan the infoWindow to a position where it's not covered by the control.

How do website heatmaps get accurate data?

There are services like crazyegg.com that show you where visitors are resting their mouse cursors on your web page. My question is, given that people have different screen widths how can they be sure that my x coordinate is the same position on the page as another persons x coordinate? Meaning, two people may have the same mouse x coordinates, but since there screens are different widths, their mouse will be on a different part of the web page.
How can you create a web-page heat map service that takes this into consideration, and can be scaled and used across multiple different websites with different content sizes?
You can collect x & y data by element (like a main content div) rather than the entire viewport. In this fashion you can discard dead-space which is subject to a user's resolution.
You can add a clickhandler to the body or a wrapper div (better when your content is centered on the screen using margin: auto) that hold all the content of the page. The passed in MouseEvent hold the screenX/Y and the clientX/Y coordinates, where the former are the coordinates starting in the left top corner of the screen and the other are coordinates based on the top/left corner of the body or wrapper div. Using the clientX/Y coordinates made it easy to create a heat map cause you the same start point relative to your content over different screen sizes.
Instead of tracking the absolute x and y coordinate of the webpage, you can track the click coordination relative to the elements clicked. So, it would cater to different screen sizes and resolutions as the element position shifted.
There is also another aspect that you need to pay attention to which is each of the users' viewport width and the length of the full page (entire scrollable height) that you can adjust according to relative positioning.
At Howuku we did a lot of optimization on the mouse click and movement to ensure the precise and accurate datapoint that is dynamically generated for our website heatmap tool.
I hope this helps!

JavaScript Closure issue

Basically, I have to load two google maps, one dependent on the another. In my main div, I am locating certain points on world map and showing InfoWindow. Now On click of each of the InfoWindow, I need to load the same zoomed out place in another div. I have a bottom div, which will load this place with the latitude and longitude as center of this place and basically a zoomed out version of the place from main Div.
I have set up a fiddle and I am actually not able to pass the center of the Main Div to bottom Div, google map.
Her is how I am doing this:
http://jsfiddle.net/refhat/SN8s4/2/
Help is appreciated.
you did not pass position to loadingAnotherMap. I have updated jsfiddle here:
http://jsfiddle.net/SN8s4/3/

Categories