I have next problem: There is jquery accordion control. One of tab have div which contains google map. And map does not fill all div. If replace map div out of accordion all work coorectly. How i can fill all div ?
Thanks.
Like this http://designer4you.ru/pic.jpg
See the discussion here: http://www.mail-archive.com/google-maps-api#googlegroups.com/msg59946.html
google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(map, "resize");
});
Related
I've created map with multi pins and different image, I need to add to the click event scroll to the div with class .store
I've tried to follow example: https://developers.google.com/maps/documentation/javascript/examples/event-simple
but no luck
you may use scrollIntoView()
marker.addListener('click', function() {
document.querySelector('div.store').scrollIntoView();
});
I use Leafletjs with google map tiles in my application. Here is my HTML markup:
<div class="map-wrap" style="display: none;">
<div id="map"></div>
</div>
<div class="rightNav">
Expand Map
</div>
In the javascript file, I have the following code:
$.expandMap = function() {
if ($(".rightNav").is(':visible')){
$(".map-wrap").animate({width:'70%'},'400');
$(".rightNav").hide(0);
map.invalidateSize();
//L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);
}
}
The map container expands fine. But the map is not expanding.
map.invalidateSize is not expanding the map or filling the outer div (container).
L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container); also failed.
However, if I resize the browser window a little bit, the map fills the outer container.
So I thought I would try to simulate the window resize programmatically using jQuery. But the too didn't expand the map.
Please let me know what I'm doing wrong.
Thanks Yehoshaphat. I did not want a full screen map. I just wanted to expand the map a little bit.
Finally, I got it working using the below code:
$.expandMap = function() {
if ($(".rightNav").is(':visible')){
$(".map-wrap").animate({width:'70%'},'400');
$(".rightNav").hide(0);
setTimeout(function(){ map.invalidateSize()}, 400);
}
}
The map now expands to fill the expanded space of the outer container. It is not very smooth; but it works.
My recommendation for you is to use the following plugin: https://github.com/brunob/leaflet.fullscreen , it adds a button for full screen, which expand the map automatically, as in the following map:.
I have a div with an anchor and icon.
<a id="createWave_addStation"><img class="createWaveToolBarImg"
src="img/mapIcons/ico_station.png"></a>
I drag this and want to drop it on an OpenLayers map. Because img's have draggable as default, I don't set it here. Now When I drag the icon, the img does not get dragged along so I only see the cursor. How can I show the icon od the dragged thing. This is my code, but it doesnt work.
$('#createWave_addStation').bind("dragstart", function(ev){
ev.preventDefault();
console.log("drag start");
enableGetMouseupEvent();
var dragIcon = document.createElement('img');
dragIcon.src = ICO_STATION;
dragIcon.width = 100;
ev.originalEvent.dataTransfer.setDragImg(dragIcon, -10, -10);
});
Well the code itself works, but the img is not shown while dragging
I hacked something together that works in Chrome, I didn't test it in any other browser.
A demo is in this fiddle.
Two things are important:
an arbitrary element should have set draggable="true"
the image you want to show while dragging should be preloaded, otherwise it will not show the first time.
I'm using the Google Maps api v3 to create a map which can be resized (the div is expanded and contracted using a jQuery toggle). Through research I found that I should call google.maps.event.trigger(map, 'resize'); when resizing the map. I have done so, but I still have problems with the tiles refreshing.
The code I am using is:
<script>
document.write('<a id="expandMap" href="#" target="_blank" title="Expand the map">+ expand map</a>');
/* Expand map_canvas DIV */
jQuery('#expandMap').toggle(function(){
jQuery('a#expandMap').text('- contract map');
jQuery('a#expandMap').attr('title', 'Contract the map');
jQuery('#map_canvas').animate({'height': '600px'}, 750, 'swing');
google.maps.event.trigger(map, 'resize');
}, function(){
jQuery('a#expandMap').text('+ expand map');
jQuery('a#expandMap').attr('title', 'Expand the map');
jQuery('#map_canvas').animate({'height': '193px'}, 750, 'swing');
google.maps.event.trigger(map, 'resize');
});
/* Expand map_canvas DIV End */
</script>
Can anyone suggest any ideas? When expanded, if you click the contract button there is a flash where all the tiles are properly visible, so it looks like the resize event is triggered when contracting. In contracted state, the map works perfectly; panning around all the tiles refresh as they should.
Really appreciate any help with this!
Cheers!
animate() takes some time.
You must trigger the resize-event of the map at least when the animation is complete(additionally you may trigger it on each step), not when it starts
I have asked this question in stackoverflow,however I do not get the final answer what I wanted.
So I want to post it again,and give more details.
The orignal post can be found here
When the mosue over a feature in the map tiles(img),the cursor will be changed to "pointer",and you can click the right place,then you will get the informatin window. This is what I mean the "interactive".
In my opinion,when we drag or zoom the map,google will make a request to the server to get the features inside the current map view. Then when the mouse move inside the Bound of one feature,the effect will occur.
But what I wonder is that how can it be so precise?
Take this tile as exmaple:
The area of the feature "Ridley...." is not a regular rect,if your mouse is not in the area of this feature,the cursor will not change.
But once your mouse come to the right place(inside the area of this feature),the effect will come out,check this:
Since the mouse's position is precisly inside the area of the feature,so I can click it and get the information window.
I just want to know how to implement this?
Update:
The effect only come out when the mouse over the certain area,check this:
The effect come out only if the mouse move inside the hightlighted rect area,very precisly.
This uses javascript and the actual content to show is already populated from the available server in a div element with display none style property. Each 256 x 256 image at zoom level 16 contains information about x and y as well as server. When viewing google maps use firebug to look at what changes the code and you will notice many div elements with class "css-3d-bug-fix-hack" at the bottom of image list. One of these elements will have childrens as well. First child is hidden. Simply remove display none off that child and it will appear.
To implement such functionality you need to know how to obtain cursor position using javascript, how to find out if cursor is in a div element using javascript or you can use JQuery Selectors to test current hovered element of certain type. You also need to understand absolute positioning in CSS. Then use javascript to hide and show elements at cusrsor position.
Is it possible they are using a polygon-based AREA tag: http://www.w3.org/TR/html4/struct/objects.html#edef-AREA?
By definition, these tags do not need to be rectangles. They could use something like <area shape='poly' coords='...'> where the coordinates could be as precise as they desire.
UPDATE: I didn't have a chance to check http://maps.google.com before answering, but I can now tell they aren't using image maps, and therefore, the functionality is not based on AREA tags. However, if you desire the functionality of non-rectangular image map overlays, my initial response still stands.
A google.maps.Marker object can listen to the following user events, for example:
'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout'
http://code.google.com/apis/maps/documentation/javascript/events.html
GoogleMap uses InfoWindows to overlay the description of data over Marker.
InfoWindows displays content in a floating window above the map. The
info window looks a little like a comic-book word balloon; it has a
content area and a tapered stem, where the tip of the stem is at a
specified location on the map. You can see the info window in action
by clicking business markers on Google Maps. The InfoWindow
constructor takes an InfoWindow options object, which specifies a set
of initial parameters for display of the info window. Upon creation,
an info window is not added to the map. To make the info window
visible, you need to call the open() method on the InfoWindow, passing
it the Map on which to open, and optionally, the Marker with which to
anchor it. (If no marker is provided, the info window will open at its
position property.)
http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
Create a Marker and attach the infowindow with a mouseover event
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, Test
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
EDITED after looking at your comment
Google Maps uses JavaScript extensively. As the user drags the map, the grid squares are downloaded from the server and inserted into the page. When a user searches for a business, the results are downloaded in the background for insertion into the side panel and map; the page is not reloaded. Locations are drawn dynamically by positioning a red pin (composed of several partially-transparent PNGs) on top of the map images.
A hidden IFrame with form submission is used because it preserves browser history. The site also uses JSON for data transfer rather than XML, for performance reasons. These techniques both fall under the broad Ajax umbrella. [From Wikipedia]