As a follow-on to a previous question... I am having no luck deleteing
an overay that I have drawn on the map, so that I can start over.
My sequence:
1) draw the map
2) the user selects a city
3) I make an ajax call to get the boundary coordinates for
the selected city, and within the ajax success block, I
draw a boundary around that city - to be complete, I draw
a polygon on the map that completely covers the viewport,
except for a "hole" punch in it that exposes the city.
Great, so far
4) The user selects a new city
5) Same ajax call, but it starts with trying to wipe out the
overlay by setting the "map" to null.
That doesn't work. The new city has a border around it, but
the overlay has become darker, and the original "hole" is
still poked through.
I'm using: negativeSpacePolygon.setMap( null );
to try and clear out the overlay. What am I missing?
See the "hide"/"show" buttons on this example from your last question:
http://www.geocodezip.com/v3_polygon_example_complex_hole.html
Related
I'm using the JQuery location picker to let the user select a place in the map. The map starts with the pin set to a default location
I'd like to add a maximum distance he/she can select a place with respect to the initial place
How can I do that?
I tried using the radius parameter but it only draws a circle around the pin and the user is still free to place the pin whereever he/she wants
that's the picker I'm using:
http://logicify.github.io/jquery-locationpicker-plugin/
Is there some parameter to set or do I need to set the onChange() callback with some code to check the distance and reset the pin marker if it's too far away?
I'd say keep track of your default location, and its allowed radius. Use the onchanged event listener for when the marker moves, and if it's outside of that radius, then reset it.
You can use this solution to work out if a marker is within a given circle.
It looks like you can get the underlying Google Map object using
var map = $('#somecomponent').locationpicker('map');
I am using google maps api V3, I am currently showing custom markers as dots of 6x6px and whenmousehover them I am showing infowindow.
I have set cursor to default on the map and on the markers aswell, now when I mousehover on the marker and then I move mouse towards infowindow for a fraction of second it shows hand cursor, which looks quite ugly when I have quite a few markers on the map, I need to avoid this, please let me know how I can avoid this.
Here is my jsfiddle Here hover on bluedots which are markers from bottom to top and you will see little flicker, I don't want to show handicons at all ... I just want default cursors
This is how I have create infowindow
var infowindow = new google.maps.InfoWindow({
content: "infowindow",
cursor: 'default',
});
This CSS has solved my problem...
#map div {
cursor:default !important;
}
I believe this may be a "bug"/"characteristic" of Google Maps API. What is happening is that when moving the cursor upward vertically, it moves off the Marker and onto the transparent bounding box of the InfoBox. However, your MouseOut handler for the Market then removes the InfoBox off of the map.
So the Google Maps API has to then decide what to do when the cursor is over an element that is removed. It SHOULD pick the cursor that you defined as the default in the MapOptions; but it does not. I used both FireFox's and Chrome's Element Inspectors, and saw repeatedly that when the InfoBox got removed, Google Maps API explicitly set the active cursor to the "Hand" instead of leaving it as the "default" in a primary child 'div' of the map.
I added a document.body.style.cursor definition to your initialization code in the JSFiddle just to make sure the Browser itself was not confused about the cursor:
$(document).ready(function () {
mapObjects.domReady = true;
document.body.style.cursor = "default";
});
Even with that added, using the Element Inspector say in Chrome, you will see that the 'div' immediately below the 'div class="gm-style" ...' gets its cursor style explicitly changed to a 'url' of the hand when the InfoBox gets removed. Move the cursor just one pixel more, and the cursor style of that 'div' gets reset back to "default" by the Google Maps API.
So the problem is not with Browser inheritance of the cursor style. The Google Maps API is itself overriding the cursor style for that child 'div', and all its child 'divs', of which the map images are a part (and which the cursor is resting over when the InfoBox gets removed).
You should of-course file a bug report with Google. Maybe they'll fix this in V4 of the Google Maps API.
One possible work-around:
You might try re-positioning the InfoBoxs so they are three, five, or more pixels away from the Marker, and off-center say to the right or left of the Marker. Then when the cursor moves off the Marker (and triggers the MouseOut and the InfoBox removal) its not on top of the hidden portion of the InfoBox, but rather over a Map image tile. Thus it will behave just like moving off the Marker to the right, left, or bottom does now, and won't get overriden by the InfoBox removal. However, if the end-user is moving the cursor fast, or in the direction of the now off-center InfoBox, you'll still get the hand cursor appearing.
Another not really recommended possible work-around:
a. Do the first recommendation (the gap between Marker and InfoBox).
b. Get a handle to that particular 'div' by stepping through the immediate children of the "gm-style" div.
c. In the MouseOut handler, use a SetTimeout with a very short millisecond interval to re-override that 'div's' cursor style back to "default".
This would get rid of the hand cursor even during a fast cursor move over the off-center InfoBox. You'll still get a slight flicker, but it won't stay a hand cursor that way if the end-user stops moving the cursor. But that is monkeying deep into Google's map 'div' structure, and this work-around is not going to be reliable long-term.
Your solution is correct and the issue is with the marker icon being an image. Try changing that using google.maps.symbols
I have created a custom SVG path for your marker on your fiddle and it worked but the infoWindow is still flickering though.
Here is the icon symbol object
icon: {
path: 'M0,0 10,0 10,10 0,10 Z',
scale: 1,
fillColor: '#076EB5',
strokeColor: '#076EB5',
fillOpacity: 1,
}
Nice documentation on the symbols here
I am trying to change my cursor in google maps to the "wait" cursor while I request information from remote servers. This is weather information from international servers and it can sometimes take a long time to return, so I want the user to know that something is going on.
A user clicks on either a marker or a bounding box and then I make the following call to get the data:
map.setOptions({draggableCursor: "wait"});
$.ajax({
type:"GET",
dateType:"html",
url:url,
cache:false,
success:function(response){openInfoWindow(response, 1);},
error:function()
{
map.setOptions({draggableCursor: null});
displayMessage("badGet",0);
}
});;
function openInfoWindow(request, ignoreStatus)
{
map.setOptions({draggableCursor: null});
infoWindow = new InfoBox({maxWidth: 0, position: center, disableAutoPan: true});
}
The first thing that I do in openInfoWindow is map.setOptions({draggableCursor: null}), so the cursor should go back to a normal cursor. After that I open an infoWindow with the results.
Here's what I find to be very strange:
1) If I leave the cursor over the marker or within the bounding box, it never switches to the wait cursor. If I move it off of the marker or outside of the bounding box, it functions as expected.
2) If the cursor is positioned over the location where the infoWindow appears, the cursor switches to the wait cursor, but doesn't switch back to the normal cursor until I move the cursor outside of the infoWindow.
3) When the cursor is not over the clicked object or the location of the infoWindow, it doesn't change from "wait" to normal until the cursor is moved.
I suspect that there's something basic that I'm missing with regards to how/when the cursor gets updated. Any enlightenment would be appreciated.
Note that you can see this behavior at http://www.geoffschultz.org/weather_map_2.php by selecting Weather Charts/BBC In-shore Forecast and lots of other places.
-- Geoff
I also had to drag or click to get the cursor to change back after
map.setOptions({draggableCursor: null});
Using this instead worked for me as soon as I move the mouse
map.setOptions({draggableCursor: ''});
For question 1, you'll need to set the Marker cursor separately from the Map cursor.
Marker.setCursor("wait");
Not sure about the problems with the InfoWindow.
Afternoon,
I have a requirement to have an interactive map where you can hover over a region (Australasia, East & South East Asia, South Asia etc.), have a "tooltip" or "hoverbox" with some info and then click and get redirected to a region page.
I started looking at Google Visualisation GeoChart with the intention of hijacking the click event but you can only select countries not regions.
Any suggestions for a JS library etc?
Many thanks.
I ended up using http://jvectormap.owl-hollow.net/ and overriding the onLabelShow, oRegionOver, onRegionOut and onRegionClick methods. Quite a simple and elegant plugin.
Well one way is to set the map as background image of a div and match its dimension using CSS. Then register a mouse move listener over that div. Now whenever the mouse moves check its coordinate and using that figure out which region is under it.
Now it would be interesting to crack the second problem. How to store the dimension of an irregular shape. Well one way could be divide the image into grids, could be one pixel thick or multiple pixels, depending on how much accuracy you need. Then store it in an array like (0 => (1, 5), 1 => (0, 6),..). In this case it says, for row 0 the region starts at column 1 and ends at column 5. On row 1, the region starts at column 0 and ends at 6; and so on.
I hope this make sense.
I have an isometric map that has selectable tiles. The map is formed by a matrix such as $('div').gameMap({map:[[{"tile":"tile_0","object":"anObjectOnTile"},{"tile":"tile_3","object":""}], [{...}]],mapsize:3}); If the tile has something within the object:"", then that tile has that object (in my case, an image of an oil derrick) on top of that tile.
There is a Place button which when clicked should place an oil derrick object on top of the currently selected tile.
However, I have run into two problems:
Knowing which tile is currently selected
Adding a single oil derrick
At first I wanted to figure a way to modify the map's matrix to insert the object's name (oilDerrick) into the tile's object parameter, but now I think the better solution would be to append the oilDerrick to the tile. I can't figure out how to append to the particular tile and not every tile.
I've got the code set up to look at and play with: http://jsfiddle.net/briz/jdhPW/13/
There's an oilDerrick object set up in the map's matrix for you to view, which can be removed by deleting the word oilDerrick in the matrix
I played with $(".tile").append($('.oilDerrick')); though I knew that would append to every tile. But I simply do not know enough about appending yet to figure out how to limit it to a single instance.
Each tile has a unique ID. I also tried this in order to add an oilDerrick to a certain tile:
$("#placeButton").click(function()
{
for (var y in config.map)
{
for (var x in config.map[y])
{
document.getElementById(obj.attr('id') + '_tile_' + x + '_' +y).appendChild(".oilDerrick");
}
}
}
But this came to no avail as well. I think I'm heading in the right direction though? Can anyone help?
I did some modifications.
There a little mess in your code. For example, your using jquery but there is a lot of direct DOM manipulation.
.style.background = ...
// should be
.css("background",...)
And the most important:
document.getElementById(...)
// should be
$("#...")
Easier, don't you think? Then, the problem is simple solved by creating a var currentTile and when the user select one tile, it save it. When click in 'place', $(currentTile).append($('.oilDerrick')); And the oil derrick move to where to selected tile.
Anyway, more details you can see in the link.