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
}
}
Related
My map is missing the pin drop, I tried figuring out the api page but i cant seem to get the pin on my google map. here is my code so far. If anyone has any ideas on how to get that pin on there I would appreciate it.
<!-- GOOGLE MAPS -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
That code is creating a map centered on lat 33.6676314, lng -117.6598071 and I'm pretty sure the map is showing fine. You haven't yet created any markers, so go on and make one. The code to achieve that, in its most basic form is
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: map
});
}
please note that the map property of a marker should point to whatever variable you named your map to. For example:
var AwesomeMap = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: AwesomeMap
});
Position can be any valid LatLng object or LatLng literal. The following, for example, is valid too
var newmarker= new google.maps.Marker({
position: {lat:33.6676314, lng:-117.6598071},
map: AwesomeMap
});
Check this out
http://www.x2tutorials.com/tutorials/google-maps-v3/using-map-markers.php
If this is not what you are trying to achieve, please elaborate on the problem you are facing
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.
I'm trying to get Google Maps to keep its center when resizing responsively.
I've managed to get the map to center but can't work out how to add my marker back in to the JS to make it center too. I'm using the code from here for the map centering... Google maps responsive resize
var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
The code I am using to center the map is above. I have the marker code below too, but I'm not sure how to add it to make it keep its center too.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP,
})
}
Can anybody help with this?
Here is a first step to get what you want to do:
var map; //<-- This is now available to both event listeners and the initialize() function
var mapCenter; // Declare a variable to store the center of the map
var centerMarker; // declare your marker
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Create a new marker and add it to the map
centerMarker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP
});
mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
// Here you set the center of the map based on your "mapCenter" variable
map.setCenter(mapCenter);
});
Edit: Based on #Chad Killingsworth comment:
You may want to add an 'idle' event handler to the map to set the mapCenter variable. You can achieve this like this:
google.maps.event.addListener(map,'idle',function(event) {
mapCenter = map.getCenter();
});
Description of the 'idle' event from the doc:
This event is fired when the map becomes idle after panning or zooming.
This is the code im working from:
http://jsfiddle.net/X9SkK/
This is the javascript:
function showmap() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
}
I want to have it so that when I click the button the map loads, however it doesnt work for some reason. I am sure its something simple but I cant pinpoint it.
The code actually creating the map is wrapped in a function named initialize, which isn't being called. Remove that and you'll be fine:
function showmap() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
Also, be sure to specify a fixed height (such as 400px) for your #map_canvas element, or it won't be visible in your jsFiddle.
Here is what you could have done:
<!-- Display Map -->
function showmap() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
initialize();
}
The initialize(); function responsible for creating a map was never called. You have to call it inside your showmap function.
DEMO
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']