I'm trying to apply a Google static map as a background for a div element. Is this possible? I'm using the image-background CSS property at the moment.
You can simply save the image by navigating to the URL of your static map and use it as a background like any other image.
.map-div {
background-image:url('static-map.png');
}
The maximum resolution it can be is 640x640, which may or may not be sufficient, however you can use a scale value of 2 to get a 1280x1280 image.
Yes, this is very possible.
You'll need a Google API key and some knowledge of CSS3.
Read more about how to do it and get some sample code here: http://blog.wadehammes.com/post/3837158298
Use this code to disable all controls:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
Related
I have a google map. When I click a marker I show a bootstrap modal with style="z-index:999999999999999999999999999". No problems here. However when I click the fullscreen button, the the modal is not shown anymore. It only works in normal mode. Any suggestions how to fix this?
To see a sample see: http://jsfiddle.net/segato/e8w4wmh6/
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
$('#myModal').modal('show');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Click the marker. Then click the full screen icon and then click a marker.
The point is that fullscreen mode use fullscreen API so anything outside the fullscreen element (in this case the map DIV) remains backward.
A workaround can be to append the modal element to the map div, for example exploiting the custom controls API.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));
See working fiddle.
N.B. I have disable modal background because in the maps it came out with a wrong z position, coming of top of the modal. I think would not be difficult to fix that if you need the background.
The solution proposed did not worked for me but inspired from this page it's OK : Google maps tool tip not working full screen mode
document.getElementById('map_canvas').firstChild.appendChild(document.getElement
ById("modalLarge"));
So I noticed in the older version of the API there was a maxZoomLevel under nokia.maps.map.Display. However I can not find anything similar to this in the JS API 3.0.
Currently I am using
map.addEventListener('mapviewchange', function () {
var zoom=map.getZoom();
if(zoom<=maxZoom) {
map.setZoom(maxZoom)
}
});
But once it hits the maxZoom and you zoom out more it is very choppy since it zooms out a bit then I set it back to maxZoom. Is there any better way of doing this?
You can set the max zoom for the layer, something like follow should work
var defaultLayers = platform.createDefaultLayers();
defaultLayers.normal.map.setMax(12);
var map = new H.Map(mapContainer,
defaultLayers.normal.map,{
center: {lat:39.2328, lng:9.01168},
});
Just a small addition on the accepted answer, if anyone is trying to use a vector layer, as provided in the here maps examples, then you just need to select the vector object, as done below:
var defaultLayers = platform.createDefaultLayers();
defaultLayers.vector.normal.map.setMax(19); // this will set the max zoom level, so the user won't able to zoom deeper than 19 (close to buildings level)
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: currentAddress,
zoom: 18 // this is the default zoom level
});
I'm trying to create a View for Google Maps, and actually got it to work according to some examples I found.
the problem is that the map draws correctly only the first time the page is displayed,
if routes are changed and then a map is being drawn again it looks "distorted".
the examples I found are "one page" part of apps.
View:
App.LocationView = Ember.View.extend({
templateName: 'location',
MapView: Ember.View.extend({
map: null,
latitudeBinding: 'controller.content.geometry.lat',
longitudeBinding: 'controller.content.geometry.lng',
didInsertElement: function() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(this.$().get(0),mapOptions);
this.set('map',map); //save for future updations
this.$().css({ width: "550px", height: "400px" });
},
reRenderMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
map: this.get('map')
});
}.observes('latitude','longitude')
})
});
I show the map with {{view view.MapView}} inside a div#map-holder, in my 'location' template.
I also apply this CSS to the div to "fix" Bootstrap messing with the map controls:
#map-holder img {
max-width: none;
}
how can I fix this ?
EDIT: jsfiddle - http://jsfiddle.net/bsphere/jYfg3/
go to 'settings' and then back to 'map' to see the distorted map
It seems like this is not exactly related to Ember, but to the map redrawing and resizing. With your fiddle, if you resize the browser window, you can see the map displays correctly.
When I saw it, I tried to put the this.$().css({ width: "550px", height: "400px" }); before the contrusction of the map, and it seems to work.
I would like to set the size of an infowindow to fit the content inside. The standard infowindow is too wide I tried to use maxWidth but it doesn't seem to work. What is the best way to resize an infowindow?
see code:
window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);
the information that will be displayed in the bubble looks like this( \n means next line)
NY \ntotal 60 \n2009: 10 \n2010: 20 \n2011: 30
What you want to do is replace the "standard" Googlemaps infoWindow with your own, and put your content into it. Once you replace the standard GM infoWindow, you have a lot of latitude to work with. What I did is this:
Add a new style ID called #infoWindow, and set its width.
#infoWindow {
width: 150px;
}
Outside of any functions within my Javascript, I create a new infoWindow:
var infoWindow = new google.maps.InfoWindow();
Create a new var within the function that sets the information displayed by the marker(s), and set its value to the content:
var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';
Call the createMarker function using the location information you would have created elsewhere, and include the html var as one of the arguments:
var marker = createMarker(point,name,html);
The createMarker function you would declare elsewhere, which would bring all of the information together, display the marker on your map, and display the information above when it's clicked on:
function createMarker(latlng,name,html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map,marker);
});
}
Just so everyone is clear, if they stumble on this thread.
All you need to do is set the height and width of a container in the your info window content.
You don't need to override google classes and you don't need to get overly complicated about this.
var contentString = '<div class="map-info-window">'+
'<h1>My Info Window</h1>'+
'<p>Hello World</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString, });
In my css I have this:
.map-info-window {
width:200px;
height:200px;
}
That's it. That's all you need to do to set the width of a Google Maps InfoWindow.
For me this CSS works fine:
.gm-style-iw {
width: 324px !important;
height: 120px !important;
}
please take a look at following API references and examples:
Google Map V3 Examples:
https://developers.google.com/maps/documentation/javascript/examples/
Google Map V3 API Ref:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
To set the size of the bubble info-window inside a google map it's enough to add the following css in your CSS file:
.gmap-popup {
max-width:204px;
max-height:110px;
}
Adapted from this discussion.
JFrancis answers is the right one, just don't forget to add "!important" in your CSS when you set the width! This might look like a minor thing, but if you don't do it, your CSS will simply get overwritten!
#infoWindow {
width: 150px !important;
}
i'm trying to put a layer on top of my google maps to cover it up. There doesn't have to be any interaction with google maps, it's just one layer on top the other.
what i have now:
<div id="map">
<div id="overlay"></div>
</div>
in the map div i put my google maps, and the overlay layer has a background as big as the map div, but the google maps keeps putting itself on top.
Anyone an idee what i can do about it?
Google Maps API V3 supports an option called noClear:
If true, do not clear the contents of the Map div.
Use it like:
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
However, semantically it feels better to put the div#overlay as the next sibling of the map div as #Marcelo suggests.
The API will overwrite anything inside the DIV you assign to the map as container.
To cover the map you'd need to put your overlay div outside the map div with position:absolute