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);
});
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);
API v3
I have a strange issue with a marker:
The marker that I place on the map is set to be draggable, WebInspector reports it as being draggable, but I still can't drag it. The cursor doesn't change when I go over the marker.
The underlying map is draggable, and that works.
On another page, with a different setup (less layers), but the same javascript, it works as expected (so there I can drag it).
I also made the marker clickable and bound an event to it, and that works fine. The cursor changes as well on mouseover.
I have run out of options.... Why can I not drag it? Can this have to do with some zIndex or layer positioning? As far as I can see, the map has a higher zIndex than all the other layers....
// display map
geocoder.geocode( { 'address':address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// map options
var mapOptions = {
zoom: 14,
center: results[0].geometry.location,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
// render map
map = new google.maps.Map(J('#'+mapElementId)[0], mapOptions);
// set marker
marker = new google.maps.Marker({
clickable: true,
draggable: true,
icon: markerImage,
shadow: markerShadow,
shape: markerShape,
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function () { alert('marker clicked'); });
google.maps.event.addListener(marker, 'dragend', function () {
alert('marker dragged')
map.setCenter(marker.getPosition());
J('input[name=coordinates]').val(marker.getPosition());
J('input[name=address]').val('');
});
J('input[name=address]').val(results[0].formatted_address);
}
});
you have draggable: false,.
change it to true
see it working here: http://jsfiddle.net/RASG/vA4eQ/
Try this:
map.setOptions({draggable: true});
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.
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},
}
I have a map in which I apply a custom overlay using KMbox overlay to signify where I think the users general point of interest lies. What I want is to display this map to the user and allow them to click on the map to give me an exact location match of their POI.
This all works fine except for when the user clicks on the map and changes the zoom of the map.
Here's my code to add the marker to the map.
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.remove();
}
if(last_marker)
{
last_marker.setMap(null);
}
marker = new google.maps.Marker({
position: location,
map: map
});
// Keep track for future unsetting...
last_marker = marker;
}
And to show the map I have this function.
function show_map(lt, ln, zoom, controls, marker)
{
var ltln = new google.maps.LatLng(lt, ln);
var vars = {
zoom: zoom,
center: ltln,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: controls,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN} ,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), vars);
KmOverlay = new KmBox(map, new google.maps.LatLng(lat, lon), KmOpts);
var totalBounds = new google.maps.LatLngBounds();
totalBounds.union(KmOverlay.getBounds());
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
I have a working example at the following link here
fixed this by using the setMap() method on the KmOverlay and passing null as a parameter.
eg:
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.setMap(null);
}