Control Options Javascript Google Maps - javascript

How can I position zoomControl options and panControl positioning next to each other but in the middle? I used LEFT_CENTER command but it does not insert them next to each other.
Thanks in regards..
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(39.300299, 34.471664),
zoom: 6,
disableDefaultUI: true,
mapTypeControl: true,
//mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.RIGHT_TOP },
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_TOP },
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: true,
panControlOptions: { position: google.maps.ControlPosition. LEFT_CENTER},
zoomControl: true,
zoomControlOptions: { style: google.maps.ZoomControlStyle.BIG, position: google.maps.ControlPosition.LEFT_TOP },
scaleControl: true,
});

For the default controls, you have to use the Control Positioning , so you can not place them next to each other in the LEFT_CENTER.
But if you use Custom Control so you can change position of custom control, you can see this example. In that example, you can change the position of the custom control by change its margin value. ex: controlUI.style.marginBottom = 100px; (You can see the change in this link: http://jsfiddle.net/cmw3zy9p/)
But for default controls, you have to follow the supported control positions.

Related

GoogleMaps: disable dragging but enable wheel mouse zooming

I'm trying to obtain the following behaviour in Google Maps V3:
Map Dragging disabled, so the map center won't be missing while the user uses the mouse
Map Zooming enabled, so the map details can be adjusted upon customer needs using the wheelmouse
To obtain this I use the following settings:
map = new google.maps.Map(document.getElementById('map_canvas'), {
center : new google.maps.LatLng(41, 14),
zoom : 13,
mapTypeId : google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
draggable: false,
scrollwheel: true,
streetViewControl: true,
fullscreenControl: true,
scaleControl: true,
rotateControl: true,
overviewMapControl: true,
overviewMapControlOptions: {opened: true},
gestureHandling: 'greedy'
});
But doesn't work, while if I set draggable: true, then the scrollwheel feature will be enabled as well. In other words it looks like to have scrollwheel: true we must also set draggable:true otherwise the setting will be ignored. Any clue?

Error load google maps with fancybox

This is my html:
<a class="fancybox" href="#g_map_container">Show Map</a>
<div id="g_map_container" style="height:100%; width: 100%;"></div>
And my script:
load_map();
$('.fancybox').fancybox({
hideOnContentClick : false,
fitToView : true,
width : '100%',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
onComplete : function(){
google.maps.event.trigger(map, "resize");
}
});
This is function load_map()
function load_map() {
mapDiv = document.getElementById('g_map_container');
var myLatlng = new google.maps.LatLng(0,0); // My address
var myOptions = {
zoom: 12,
scrollwheel: true,
disableDoubleClickZoom: true,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false
},
streetViewControl: false
};
map = new google.maps.Map(mapDiv, myOptions);
}
This is result:
Try using fixed size in your map container
<div id="g_map_container" style="height:500px; width: 500px;"></div>
if work in this situation you must assign a proper width and heigth at all the container parent of your map div ..(no parent div must be without an assigned, also in percentage, width and height)
You can not use % in width or height of the gmap canvas. you should type fixed size, e.g. 400 x 500. etc. Otherwise, it'll show you nothing.
UPDATED:
Besides, take a look at your code at:
var myLatlng = new google.maps.LatLng(0,0); // My address
Try to define concretely the latt and long inside it.

google.Maps.Circle repeats in every clone part of google map on small zoom option

Does anyone know the way to prevent the repeating property of circle in every clone part of google map.
In google.Maps API I found the similar option of marker it's: optimized property set to false.
The parts of my code:
this.map = new google.maps.Map(this.el, {
zoom: 4,
center: new google.maps.LatLng(33.2169, -97.1336),
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
});
this.circle = new google.maps.Circle({
center: new google.maps.LatLng(33.2169, -97.1336),
radius: 1609344,
strokeWeight: 1,
strokeColor: "#e64646",
draggable: true,
editable: true,
visible: false,
map: this.map
});

Google Maps API v3: lock area from dragging

I'm looking for a way to border the area (in my case: The Netherlands) in the Google Maps API v3 and stop the user from dragging the map outside of the border. The option I think I need is drag(+)(end,ging etc.) described at the following link: https://developers.google.com/maps/documentation/javascript/reference . Found alot of examples already but they don't seem to fit in my code. Here is the javascript part of the API:
function initialize() {
var mapOptions = {
zoom: 1, //zoomValue
minZoom: 7, //minimumValue zoom
center: new google.maps.LatLng(52.088282, 5.477124), //position center map (geoLocation)
mapTypeControl: true, //mapType (cart/satelite)
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
panControl: false, //panControl (moveLeft/moveUp/moveRight/moveDown)
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true, //zoomControl (zoomIn/zoomOut)
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true, //scaleControl
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
you just need to add
draggable: false
in the options list

Change order of Google Map controls in the same location (i.e. RIGHT_TOP)

I need to rearrange the default controls in the Google Map (v3, 3.4) API.
Everything is in place and works, but when I add the mapTypeControl, zoomControl, the streetViewControl and the panControl to the same ControlPosition (i.e. google.maps.ControlPosition.RIGHT_TOP), I can't define the order of how they are rendered.
mapTypeControl has a default of TOP_RIGHT, but changing it to RIGHT_TOP (the default of the other ones mentioned above) add's it to the bottom in this location:
Here's the code for the map options (nevermind the added OSM layer):
var mapOptions = {
zoom: 12,
center: def_center, // is set before this snippet
mapTypeControl: true,
mapTypeId: user_maptype, // is set before this snippet
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, "openstreetmap"]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
I need the mapTypeControl to be the first element to be rendered (above the streetViewControl). Any idea how to do this?
This code works fine in the google code editor # http://code.google.com/apis/ajax/playground/#control_position_v3
in the end the solution was to use TOP_RIGHT instead of RIGHT_TOP
Additionally the index property can be changed via setAttribute just like a majority of the other properties.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
});
}
I don't realy have a solution unfortunately but acording to this page
Google Map API V3 Controls user defined controls can be placed before the default ones by changing their index in DOM. Might this be the same problem, that the zoom-control has a lower index than the map/satelite control?
Not sure how you would go about changing the index but it might be an avenue to find a solution.
Oh and if you do find out how to solve it please paste your solution here. Might come in handy.

Categories