We are building a website which should have the following layout:
As you can see, there's a header and a sidebar, and the content area is a Google Map built with the Google Maps Javascript API v3.
Now we would like to make the header and the sidebar half-transparent, such that the map would be visible behind the header and the sidebar, something like this:
However, now the header and the sidebar are overlapping the Google logo and the zoom control.
Is there a way to tell the Google map that it should apply some padding to the placement of its controls?
Of course we could try to move the Google logo and the controls "manually" by applying some CSS, but the Google Maps Javascript API would restore their location every time the user uses the map (e.g. on panning or scrolling), so this would result in a fight between our code and Google's.
I have found an answer that seems to work reliably:
The controls
You can add a top-margin to the controls by adding a dummy control:
var dummy = document.createElement('div');
dummy.style.height = '55px';
dummy.style.width = '100px';
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(dummy);
Then, in the configuration, place the zoom control with RIGHT_TOP:
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP,
},
Note that this only works because TOP_RIGHT controls are always placed above RIGHT_TOP controls.
The Google logo
The following code waits for the Google map to be initialized, then adds the class gmaps-logo-padded to the logo:
var moveLogo = function () {
var logo = $('#map div a div img').parent().parent().parent();
if (logo.length == 0)
window.setTimeout(moveLogo, 10);
else
logo.addClass('gmaps-logo-padded');
};
moveLogo();
Then, by applying the following CSS, you can change the placement of the logo:
.gmaps-logo-padded {
left: 300px !important;
}
Please note that paragraph 9.4 of the Terms of Service forbid hiding or removing the logo.
As for the zoom control placement, you can use Control positioning, for example:
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
Related
Before anyone jumps on me for an answer to my question that already exists, please read the rest of my question and tell me how to handle this.
There is already a question asked (Making the Bing Map API Map responsive) that contains what is marked as an answer except the answer doesn't work.
The problem? In addition to some other issues (Google vs. Bing, a full listing of the javascript implementation, etc.) the answer includes a variable called listingsW that does not exist anywhere in the answer or the question.
Does anyone have a working example (complete) for either Bing or Google?
Thanks in advance!
$(window).resize(function () {
var screenH = $(document).height();
var screenW = $(document).width();
$('#map-canvas').css({
width: screenW - listingsW,
})
google.maps.event.trigger(map, 'resize');
});
listinsW is the width of some other control on their page. If you had a side panel, that may contain a list of items beside the map you would subtract this the width of that panel from the screen width to get the width of the map. If you have a full screen map then remove this property. All that said you could just simply have the map fill the available space by setting the css propertyies; position:relative;width:100%;height:100%. You will also need to add the following to your CSS styles:
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
By using CSS you don't need to worry about using events when the window resizes.
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 SVG chart using d3js. We can add some points to this chart and move it. When I have a big page and so when we need to scroll it, it works with the mouse. But I have an input screen with multi-touch and in more I develop my app for mobile.
The input with the chart and the scroll aren't working together with an input touch. For example if I want to move my point it's the page which scroll and not my point wich move. It's not exactly the same bugs on firefox, IE and my Windows RT app.
You can see a little example here to test if you have an input touch, I guess tablet and smartphone will have the same behaviour than my PC with a touch screen.
I have the following css to simulate a bigger app:
body {
overflow:visible;
width: 2000px;
height: 2000px;
}
There is a way to do this?
I hope you understood my problem :)
I tested this on my phone and tried to research how to force a browser to stop scrolling with little success. The good news is your app allows a mobile user to place a new point really nicely.
To get the project done quick, you might need to create a set of controls that grabs an id of each existing point and allow the mobile user to move the desired point using buttons. The UI for such a set of controls could be minimal and intuitive if done well. You could set the UI to display:none and only show when the screen width/height is iPad size or less.
I finnaly found a solution with the pointer-events property in css
var C1 = document.getElementById("C1"),
evtIn = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
evtOut = window.navigator.msPointerEnabled ? "MSPointerUp" : "touchend";
C1.addEventListener(evtIn, function () {
d3.select("#C1").style("pointer-events", "all");
d3.select("body").style("overflow", "hidden");
}, false);
C1.addEventListener(evtOut, function () {
d3.select("#C1").style("pointer-events", "none");
d3.select("body").style("overflow", "auto");
}, false);
On touch start I just allow pointer events in my chart et disable overflow and in the other way for the touch end.
Does anyone know how to get the current style being used by the map zoom control?
e.g. google.maps.ZoomControlStyle.SMALL, or google.maps.ZoomControlStyle.LARGE
You can specifiy the start style in mapOptions but the map changes the style to small if the web browser is resized too small, or the map is being viewed on a touch device.
I show custom labels next to the zoom control on www.topomap.co.nz and would like to hide the labels if the control style becomes SMALL.
The zoom control changes automatically at the following sizes, perhaps you could attach an event listener to the onsize method, and monitor the size of you canvas and adapt once the resolution has changed. https://developers.google.com/maps/documentation/javascript/controls
The sizes are:
Greater than 400x350px = large zoom
Less than 400x350px = small zoom (the control adjusts if either extent is less than this amount)
A bit of a hack that is likely to need revising in future Google Maps API releases as the graphics get tweaked by Google:
function isFullGoogleZoomControl() {
return $("#map .gmnoprint img[src$='mapcontrols3d7.png']").length > 0;
}
Note: Requires jQuery for the selector.
Update to include support for IE10 with touch screen:
function isFullGoogleZoomControl() {
return $("#map .gmnoprint img[src$='mapcontrols3d7.png']").length > 1;
}
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]