I initiallize a map in my application like this:
function doLoad() {
var parnitha= new google.maps.LatLng(38.155428,23.718739);
var myOptions = {
zoom:16,
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: parnitha,
disableDefaultUI: true,
navigationControl: true,
scrollwheel: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT},
}
map= new google.maps.Map(document.getElementById("map_canvas"), myOptions); }.
With double click on the map, it making zoom and i don't want this, because i want to use dbClick event for other reason.Please help me to remove the default dbClick event on the map.
Thanks a lot..
Try setting disableDoubleClickZoom to true in the map options object. It's also documented at http://code.google.com/apis/maps/documentation/javascript/reference.html
Update your myOptions object to look like this (note the first option):
var myOptions = {
disableDoubleClickZoom: true,
zoom:16,
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: parnitha,
disableDefaultUI: true,
navigationControl: true,
scrollwheel: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT},
}
Related
QUESTION:
Is it possible to hide the dropdown menu off the MapTypeControl?
(Nothing found in the Google Maps API v3 documentation).
DESCRIPTION:
I'm using the default control with google.maps.MapTypeControlStyle.HORIZONTAL_BAR style and i don't want to create a custom control.
MapTypeControl:
MapTypeControl with dropdown menu on mouseover:
Javascript:
var mapOptions = {
...
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
The MapTypeId.TERRAIN control looks to get added as a drop-down. Do you need it? If not, you can use the following code
var mapOptions = {
...
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
},
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
We are currently using two google maps on one page, the first one is an aerial view, and this I can turn off draggable and it works fine. The other is an internal view of the building, when I use the same code on this, it doesnt disable draggable on mobile or on desktop, I can disable scrollwheel movement, but not draggable. The code I am using is below.
function initialize2() {
var fenway = new google.maps.LatLng(0, 0);
var mapOptions = {
center: fenway,
scrollwheel: false,
zoom: 8,
draggable: false
};
var panoramaOptions = {
position: fenway,
scrollwheel: false,
draggable: false,
<?php echo(isMobile()) ? 'draggable: false,' : ''; ?>
pov: {
heading: 180,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas2'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
You just need to add: draggable: false like this
// Function to initialize the map within the map div
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 27.963989, lng: -82.799957},
zoom: 14,
draggable: false
});
}
Im using Google Maps, I added 2 markers.
Online Demo:
http://jsfiddle.net/VnwFT/1/
I just need to set a zoom, I tried in mapOpts and in fitBounds as well:
zoom
minzoom
maxzoom
e.x:
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
zoom: 16
}
and it doesn't work.
How Could I set a zoom?
See what I've done here:
http://jsfiddle.net/VnwFT/27/
First you need to define the center of the map when you initialize it:
var mapOpts = {
center: new google.maps.LatLng(45.764043,4.835659),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
zoom: 16
}
Then if you don't need the fitBounds function (the center of the map is already defined on initialize), you could comment it.
Then in the marker click listener you could edit the code to zoom the map on marker click:
google.maps.event.addListener(pushPin, "click", function () {
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if (this.sidebarButton) this.sidebarButton.button.focus();
map.setZoom(16);
});
I have two Google Maps setups on a site that I'm developing, and I want to apply custom markers to both of them. This is what I have written -
var coordinates_1 = new google.maps.LatLng(x, x);
var coordinates_2 = new google.maps.LatLng(x, x);
var map_1_options = {
zoom: 14,
center: coordinates_1,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map_2_options = {
zoom: 14,
center: coordinates_2,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker_1 = new google.maps.Marker({
position: coordinates_1,
map: map_1,
icon: '/images/marker.png'
});
var marker_2 = new google.maps.Marker({
position: coordinates_2,
map: map_2,
icon: '/images/marker.png'
});
var map_1 = new google.maps.Map(document.getElementById('location_1'), map_1_options);
var map_2 = new google.maps.Map(document.getElementById('location_2'), map_2_options);
I guess the script can be optimised but that's not the important issue here. What happens is I don't get any error messages (or missing images), and I get both maps displayed at their right location but no markers are showing. The images are 32x32px if that matters.
Any help would be appreciated.
You must first create map_1 and map_2 before you use them as map-property for the markers.
How can I hide map types bar on Google Maps?
(hide Ter, and Earth on menu bar)
I create code from http://maps.google.com
I suggest you to look at this:
http://code.google.com/apis/maps/documentation/javascript/controls.html
Short:
mapTypeControl: false
this will hide map types bar.
or here is init function:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Vahagn's answer will completely hide the bar. But it's not clear from your question if this is what you want to do, or if you only want to hide just the options for Terrain and Earth. If the latter, you could try:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Basically you need to set the property mapTypeControl to false like this:
mapTypeControl: true,
here is a live example of a page that offers customization with respect to look and feel.