I am not seeing any reason why the zoom controls are not showing up as the controls are not disabled in my option? this is v3 google map..has anyone faced similar issue? I can zoom in and out using mouse scroll button or touchpad scroll of laptop..but the icons +/- would be great!
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.095287, -79.3185139);
var myOptions = {
maxZoom: 12,
//zoom: 9,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
You have to use zoom and also center properties to display your map correctly, here is a jsfiddle of a map constructed with your options.
http://jsfiddle.net/5ytkx/9/
Remove the comments before zoom and center properties
zoom: 9,
center: latlng,
Could it be because your myOptions variable includes a trailing comma?
mapTypeId: google.maps.MapTypeId.ROADMAP,
Will it work if you remove that?
Hope this helps
Could you try this?
mapTypeId: google.maps.MapTypeId['ROADMAP']
Related
I'm having a problem about the zoom property in my map. The deal is: I'm developing a full one page looping and I need to insert the map but, when you get in the section of the map screen and need to scroll up or down, just doesn't happens, because you're moving the zoom instead the page.
My js is:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-23, -46),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var meukml = new google.maps.KmlLayer({
url:'http://oceanos.nap.usp.br/remmarsp/tvlhico/contourfgradeSBB01.kmz'
});
meukml.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I think that is necessary just to deactivate the zoom. How do I do this?
Try removing it in the map options !
var mapOptions = {
center: new google.maps.LatLng(-23, -46),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
'controls': {
'zoom': false
},
'gestures': {
'zoom': false
}
}
So, I'm a little confused. I tried calling a google map with the api and tutorial provided here:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
But I seem to be unable to get it to work correctly, and my map div always ends up being a grey box.
Here's the html and js that I used. Please let me know if there is some sort of glaring error, or if I should be using another api...
<div id="map_canvas"></div>
...
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById("map_canvas");
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas);
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
my css is set to have the height and width be 300px and 500px respectively... if that matters to you personally.
I think your code doesn't use the options. I'm not sure that's THE problem, but that's A problem:
try:
var map = new google.maps.Map(map_canvas, mapOptions);
If you are looking for your map to appear, start with this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas" style="width:300;height:500">
<script>
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center: new google.maps.LatLng(20, 0) };
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</div>
</body>
</html>
I think the main problem is the mapOptions is not included when the map is initialized.
it's supposed to be like this:
var map = new google.maps.Map(map_canvas, mapOptions);
~ try to read again the tutorial provided, it's defined that the 'center', 'zoom level', and 'map type' are required options.
Options for the map, such as the center, zoom level, and the map type.
There are many more options that can be set, but these three are required.
How do I transition to Street View from Normal View and vice-versa just by zooming in/out and not involving Pegman in the process?
So far, it seems the only way to transition between the two views is by placing the Pegman on the map - to enter Street View and clicking on the Cross button on the top-right - to exit Street View. I want to make the transition to mimic that of maps.google.com. Any ideas?
Thanks!
This is the example from the api for street view.
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
map.setStreetView(panorama);
Then use an event handler for the zoom case.
Hope that helps :)
How can I toggle Streetview on an specific map canvas by clicking a button (API v3) ?
function ToggleStreetView(map)
{
//Assume map contains the google.maps.Map object
}
This is the function that I wrote for a maps app that I wrote a while ago:
// Toggles between map and panorama view
function togglePanorama(){
if(isPanorama){
map.streetView.setVisible(false);
$('#message').empty().append('Click here to take a tour of our office.');
isPanorama = 0;
} else{
map.streetView.setVisible(true);
$('#message').empty().append('Back to the map.');
isPanorama = 1;
}
}
Though I was using it with a custom panorama it will work just fine with the default Street View.
Get the 'streetview' of your map then setVisible to 'false' and your streetview should no longer be visible.
// map would be map instance
map.getStreetView().setVisible(false);
I assume you are using Javascript version 3 API from google maps
here is a sample code
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
if you lool carefully you can see line of code
mapTypeId: google.maps.MapTypeId.ROADMAP
you can declare our map variable and than iinside your function change its MapTypeId
Is there any way to remove the circular panning navigation control but keep the zoom control in the Google Maps V3 API? I've tried forcing it offscreen with jQuery but every time the map is updated it comes back. Any ideas? Thanks!
You may also have a look in here, you can remove/add specific controls when you declare your map:
var latlng = new google.maps.LatLng(40.44062, -79.99588);
var options = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Taking Control of the Google Maps API V3 Controls
You can use google.maps.NavigationControlStyle.SMALL to display a small plus/minus zoom control, otherwise you'll have to create your own zoom control and add it to the map.
http://code.google.com/apis/maps/documentation/javascript/controls.html
In V3, when you define your options - you have the option of disabling/enabling any UI features:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
//panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}