is it possible to set the height and the width for the google maps infoWindow?
I ask this because i have an ugly scrollbar on the right side
Thanks in advance!
Just wrap the infowindow content in a div:
var infoWindow = new google.maps.InfoWindow({
position: map.getCenter(),
content: '<div id="iw"><strong>Nachtclub Bar Rouge</strong><br />Französische Straße 15<br />10117 Berlin Mitte</div>'
});
infoWindow.open(map);
example
Related
i want to place a label below the marker (my marker is a circle). Now it is in the middle and it is not what I want, my code:
var circle = new google.maps.Marker({
position: circle,
map: map,
icon: '<?php echo get_stylesheet_directory_uri().'/images/circle.png'; ?>',
label: "My city"
});
Set the labelOrigin property of the Icon appropriately for your icon.
from the documentation:
labelOrigin | Type: Point
The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.
I'm currently using Bootstrap, using the following template they provide:
Bootstrap Dashboard Template
I like the header/navbar, and the sidebar. I have removed all the content in the "main space" div, leaving it blank. This is the div's code (ignore the border; it's there for me to visualize what the div is doing):
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"
id="maps_canvas" style="border:2px solid red">
<!-- a Google Maps embed would be here -->
</div>
My goal is to embed Google Maps in this whitespace. To do this, I need to create a div that fills the entire whitespace. Ideally, I would like the div to bind to the edges of the window, so it doesn't overflow / create any scrolling. I found that by hard-setting my height, it would result in overflow if I resized my Chrome window for example. Is there a way to do this?
For example, look at http://www.renthop.com/. They have a map that does what I'm looking to do - it locks to the bottom right of the screen.
EDIT: This is a jquery problem. Problem now is, I can't seem to get both these functions to run. when I remove my $(document) function, the google function works no problem. When I include it, the entire thing falls over:
/*$(document).ready(function() {
/* confirm("im here");
/*$('#map_canvas').css({'height': (($(window).height()) - 114)+'px'});
$(window).resize(function(){
$('#map_canvas').css({'height': (($(window).height()) - 114)+'px'});
});
});*/
function initialize(){
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(40.749623,-73.9618013),
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
I mad some changes to your HTML and CSS, one problem is because bootstrap floats items they do not like to fill a height 100%. You need to make the float container positioned absolute and its parent as relative to maintain it. http://jsfiddle.net/RZb2D/3/
#maps_canvas {
padding:0px;
height:100%;
position:absolute;
}
.row {
height:100%;
position:relative;
}
I am using Angular UI's Google Maps directives.
I would like to use a text box for the user to enter a location and with auto-complete, load the location in the maps canvas when user selects from auto-complete drop down.
How would i go about doing that using these directives ?
Thanks
This feature is not supported yet and is under construction. Refer: https://github.com/nlaplante/angular-google-maps/issues/383
The auto-complete location is supported by Angular UI Google Maps directives
Here's your search textbox and map canvas.
<input id="pac-input" class="controls" type="text" placeholder="Search for a location" ng-model="model.searchAddress" />
<div ui-map="model.locationMap" ui-options="mapOptions" id="map_canvas" class="map"
style="height: 420px; width: 420px;" ui-event="{'map-click': 'setMarker($event, $params)'}"></div>
Here's JS code that you should put into controller associated with your map and search textbox. This code taps into Google Maps API,
var searchAddressInput = document.getElementById('pac-input');
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.5085011, -6.2154598), //south east corner
new google.maps.LatLng(53.5585011, -6.2654598) //north west corner
);
var mapOptions = {
center: new google.maps.LatLng(53.5085011, -6.2154598),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
bounds: mapBounds
};
var autocomplete = new google.maps.places.Autocomplete(searchAddressInput, mapOptions);
//set the bounds of autocomplete to map's current viewport
autocomplete.bindTo('bounds', $scope.model.locationMap);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
onPlaceChanged();
});
In the code above you are associating autocomplete object with your searchbox, then binding the onPlaceChanged() function to it, once one of the suggested locations is clicked.
This is the code that will be executed
function onPlaceChanged() {
var place = autocomplete.getPlace();
$scope.model.locationMap.panTo(place.geometry.location);
$scope.model.locationMap.setZoom(14);
//place pin on the map
marker.setPosition(new google.maps.LatLng(place.geometry.location.k, place.geometry.location.B));
}
That would be all. One more word of advice though. If you happen to be using an autocomplete for a Google Map in the modal window, you have to add this snippet into your CSS:
div.pac-container {
z-index: 1050 !important;
}
Bootstrap modal has a z-index of 900 something, so the autocomplete suggestions would appear behind it. You wouldn't get any JS errors, so it's not an ideal situation, cause you donn't know what the hell is going on. Changing z-index ensures that autocomplete suggestions are on the top.
This is the code:
#map_canvas {
height: 1000px;
text-align: center;
}
<div dojoType="dojox.mobile.ContentPane" style="overflow: auto;">
<div id="map_canvas"></div>
<!-- cambiare style -->
</div>
I tried to center with various css attributi but don't works.How i center and enlarge all map in panel?
You have to resize your map.
Try this
var mapOptions = {
center: new google.maps.LatLng(43.653226, -79.3831843),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$('#map-canvas').fadeIn('slow', function() {
google.maps.event.trigger(map, 'resize');
}
Anish's code is working for me. (minor fix: map-canvas -> map_canvas) The map fills the width of the page and is 1000px high.
Looking at the screenshot, your map is filling the width of the window. You can tell this because the map control is all the way to the right of the screen in the upper corner. But for some reason, the map isn't fetching the tiles that it needs to fill itself. This usually happens when the map container is resized without triggering the google map resize event. Are you creating the map before the dojo parser runs? I put Anish's code inside the ready() function in dojoInit() and the map fills the screen when it is shown.
Sizing google maps to fill available space (not using absolute height and width) is tricky, but usually the problem is the height, not the width. I've written a series of blog post on google maps in worklight here: http://www.ibm.com/developerworks/community/blogs/dhuyvett
Consider the following example code:
http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
I can do scrollwheel: false on a mapOptions to disable mouse wheel zoom. The feature is not implemented on the streetview panoramaOptions.
In Chrome, I can safely disable mouse wheel zoom on the streetview simply by.
$('#pano *').bind('mousewheel', function(){
return false;
});
However this does not work in elsewhere. Please help me get it working in top 3-5 browsers?
There is now a confirmed feature request with Gmaps API issues http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. Let's hope Google's engineers will look into it when they get trough more important bugs. I hate to hold my breath, but I'll park this for now.
According to Subgurim.net, this is how to do it;
[powerscript - other event]
CONSTANT integer WM_MOUSEWHEEL = 522
IF message.number = WM_MOUSEWHEEL AND & KeyDown (KeyControl!) THEN
message.processed = TRUE
RETURN 1
END IF
I realise that you are using Javascript, and this is a VB example, but hopefully it helps.
I use the below code to avoid double click zoom - pretty sure it could be adapted to scroll wheel zoom. zoom: 1 being my preferred zoom stage here, but could be anything.
$("#panorama").dblclick( function(){
panorama.setPov( {
heading: panorama.getPov().heading,
pitch: panorama.getPov().pitch, zoom: 1
});
});
There is an easy workaround: by adding a layer before the streetview with a higher z-index, you will prevent the zooming function of the Streetview.
<div id="panorama" style="position: absolute;left:0; top: 0;height: 100%; width: 100%; z-index: -1;opacity: 1"></div>
<div id="layerBeforePanorama" style="position: absolute;left:0; top: 0;height: 100%; width: 100%; z-index: 0;opacity: 1"></div>
<script>
var panoOptions = {
position: latlng,
pov: {
heading: 0,
pitch: 0
}
};
var pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
</script>