I have a web-page here. It uses google maps and it worked well. Recently a new version of google maps was released where some changes were made. For instance, instead of e.latLng.F, e.latLng.lng and instead of e.latLng.A, e.latLng.lat should be used. So far, so good. However, for some reason, the zoom scrollbar cannot be seen. I know one can still zoom with mouse scrolling, however, what about devices where mouse scroll is not defined, like a laptop with a touchpad?
This is a part of initialization:
var mapOptions = {
center: { lat: lat, lng: lon},
zoom: 14
};
if (!administrator) {
mapOptions.mapTypeId = google.maps.MapTypeId.HYBRID;
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
I believe I should define an attribute for mapOptions, but I do not know what should be defined there. When I searched for this on google, I have not found the answer. It is possible that I will find out the answer soon, but anyway, I ask the question here to make sure that others will have an answer to this question in the future. Thanks.
EDIT:
At this page I can see a zoom control. This is the code there:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
if I modify it to this:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize()
{
var mapProp = {
center: { lat: 51.508742, lng: -0.120850},
zoom:7,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
the zoom control is still displayed. I wonder why is the zoom control displayed at w3c and not at my end, since:
both the example and my code uses a div
the properties are initialized in a similar manner
the map is initialized in a similar manner
the dom listener is initialized in a similar manner
They've removed the scroll bar from the newest API, but they left the + and - zoom controls. Strangely, I see that your map doesn't have those either.
This article about the changes made to the map controls might be useful
The zoom control was always displayed, but the footer overflown it. It seems that the zoom control is positioned to the right bottom by default, while earlier it was positioned to the left top by default. The solution is either to make sure that the div where the map is displayed is displayed fully, or to initialize the position of the zoom control, like this:
var mapOptions = {
center: { lat: lat, lng: lon},
zoom: 14,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
};
Related
First of all, I know Google has documentation on how to complete all of these features, but even when I add the exact coding, the map no longer shows up, or it simply does not work.
I'm completely new to development, but the project I'm trying to complete is a Game of Thrones map, where other users may visit and add a marker, name the marker ( not a simple one-character label, more like an actual name, several characters long ), and delete their marker. If someone else adds a marker, I'd like to be able to see it. And vice versa, I want everyone's markers on the map to be visible.
So far, as a first step, all I'm trying to complete right now is creating markers and making them draggable. The map shows up fine, until I add the value "draggable:true" to the markers options. even though that's what the google documentation suggests.
Here's the google documentation: https://developers.google.com/maps/documentation/javascript/markers
And here's the page i'm trying to get the project to work on:http://jamie-jabbours-fabulous-project.webflow.io/
and here's the exact code i'm using:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
draggable: true
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB55_iwgWvg1_NjoIEqqXgeQOeDBrq8p5o&callback=initMap">
</script>
</body>
</html>
I'm sure there is something very simple I'm doing wrong, but I can't see it.
Just add a comma..after map and before draggable
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
draggable: true
});
}
Watch out for syntax bugs next time :)
So I have this:
<iframe src="https://mapsengine.google.com/map/embed?mid=zkXLRR9SQKDQ.kfLF9HxBaALo&z=15" width="100%" height="100%"></iframe>
I managed to find the zoom code on here, however I couldn't find a way to remove the grey bar that appears at the top of the map with my google account stuff.
A screenshot can be found here.
Is there a way to remove this using a URL parameter?
I don't think it's possible to remove the bar. Instead you could use the Google Maps Javascript API. It's fairly easy to use and gives you much more control. Here's an example that loads your location with the right zoom level: plnkr.co.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(51.4893169, -2.1182648);
var mapOptions = {
center: latLng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Documentation for the API.
If you need a specific style for your map, you can use the Styled Maps Wizard.
Depending on where you put your map on your page, it might conflict with scrolling. If that is the case, then set the scrollwheel option to false. That allows you to scroll over the map without it highjacking the scroll event for it's zoom functionality. I've updated the plnkr to use scrollwheel: false.
I am trying to get a google maps working, but first map won't load and now there is a error on a google file.
typeerror:%20a%20is%20null%20http://maps.gstatic.com/intl/pt_ALL/mapfiles/api-3/17/2/main.js%20Line%2040
This is my code:
<div id="map_canvas" style="width: 100%; height: 100%"></div>
<script>
var map;
var zoom=5;
var center = new google.maps.LatLng(36.6, 0);
function initialize() {
var mapOptions = {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.HYBRID,
minZoom: zoom
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
First I had the key parameter, then i took it off because it wasn't showing as well. Also I received some alert popups about the key of google maps being disabled and for me to read terms and conditions of google maps, which i did and found my website to comply to current terms (login website without users paying any fee.) of google maps.
I would greatly appreciate any help with this issue.
Thank you.
First, div id is map_canvas but you are using map-canvas in your js code.
Second, try giving dimensions in pixels instead of percents i.e width:400px;height:400px;
Demo: http://jsfiddle.net/lotusgodkk/x8dSP/3421/
CSS:
#map_canvas {
width:500px;
height:500px;
}
JS:
var map;
var zoom = 5;
var center = new google.maps.LatLng(36.6, 0);
function initialize() {
var mapOptions = {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.HYBRID,
minZoom: zoom
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
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 switching from v2 to v3 google maps api and got a problem with gMap.getBounds() function.
I need to get the bounds of my map after its initialization.
Here is my javascript code:
var gMap;
$(document).ready(
function() {
var latlng = new google.maps.LatLng(55.755327, 37.622166);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
alert(gMap.getBounds());
}
);
So now it alerts me that gMap.getBounds() is undefined.
I've tried to get getBounds values in click event and it works fine for me, but I cannot get the same results in load map event.
Also getBounds works fine while document is loading in Google Maps API v2, but it fails in V3.
Could you please help me to solve this problem?
In the early days of the v3 API, the getBounds() method required the map tiles to have finished loading for it to return correct results. However now it seems that you can listen to bounds_changed event, which is fired even before the tilesloaded event:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps v3 - getBounds is undefined</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 350px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: new google.maps.LatLng(55.755327, 37.622166),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'bounds_changed', function() {
alert(map.getBounds());
});
</script>
</body>
</html>
It should be working, atleast according to the documentation for getBounds(). Nevertheless:
var gMap;
$(document).ready(function() {
var latlng = new google.maps.LatLng(55.755327, 37.622166);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
google.maps.event.addListenerOnce(gMap, 'idle', function(){
alert(this.getBounds());
});
});
See it working here.
I was saying Salman's solution is better because the idle event is called earlier than the tilesloaded one, since it waits for all the tiles to be loaded. But on a closer look, it seems bounds_changed is called even earlier and it also makes more sense, since you're looking for the bounds, right? :)
So my solution would be:
google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
alert(this.getBounds());
});
In other comments here, it's adviced to use the "bounds_changed" event over "idle", which I agree with. Certainly under IE8 which triggers "idle" before "bounds_changed" on my dev machine at least, leaving me with a reference to null on getBounds.
The "bounds_changed" event however, will be triggered continuously when you'll drag the map. Therefor, if you want to use this event to start loading markers, it will be heavy on your webserver.
My multi browser solution to this problem:
google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
loadMyMarkers();
google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});
Well, i'm not sure if i'm too late, but here's my solution using gmaps.js plugin:
map = new GMaps({...});
// bounds loaded? if not try again after 0.5 sec
var check_bounds = function(){
var ok = true;
if (map.getBounds() === undefined)
ok = false;
if (! ok)
setTimeout(check_bounds, 500);
else {
//ok to query bounds here
var bounds = map.getBounds();
}
}
//call it
check_bounds();
Adding an answer for 2021.
Map.getBounds() may return undefined initially. The preferred workaround to this is to use the bounds_changed event. Typically, an undefined value will only happen in the initialization of the map and never again.
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: new google.maps.LatLng(55.755327, 37.622166),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.addEventListener('bounds_changed', () => {
console.log(map.getBounds());
});
https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed