Google yesterday released v3.22 of their maps api which moves a bunch of the standard controls.
According to the Google Blog at http://googlegeodevelopers.blogspot.co.uk/2015/09/new-controls-style-for-google-maps.html#gpluscomments you can temporarily revert to the old controls, but I can;t get this to work at all.
The blog post says to simply add google.maps.controlsStyle = 'azteca' before you initialize the map, but I'm still getting the old controls displayed and they clash with some of my custom controls.
I've tried adding the line right at the start of my initialize() routine (which sets up all of the map options and creates the map object; and also right before the map = new google.maps.Map() statement.
Has anyone got any pointers as to what I'm doing wrong?
They have a typo in the post (and in the documentation)
Issue in the issue tracker
google.maps.controlsStyle = 'azteca';
should be:
google.maps.controlStyle = 'azteca';
code snippet:
var map;
function initMap() {
google.maps.controlStyle = 'azteca'
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
try this:
google.maps.controlStyle = 'azteca';
Related
This is the first time I've used a google api and I followed the instructions exactly but the map won't load just the grey box that I started with, please help.
<div class="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function apimap() {
var uluru = {lat: -73.993439, lng: 40.750545};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
It seems there's an issue regarding your implementation. You are using apimap() as your init function while in your load request's callback, you are using initMap(). You should replace initMap() with apimap() or vice-versa. With this, your map will work.
I've replicated your issue, the location is in Antartica. You can check the demo below.
var map;
function apimap() {
var uluru = {lat: -73.993439, lng: 40.750545};
map = new google.maps.Map(document.getElementById('map'), {
center: uluru,
zoom: 4
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=apimap"
async defer></script>
And also, please refrain from posting your Google Maps API key unless it is restricted to prevent abuse and to avoid your API key being used by unauthorized applications. To learn more about API restrictions, you can check Restricting an API key.
Hope it could help and good luck on your coding!
my map is not rendering correctly.
I have never experienced this yet (notice the icons on the right buttons being distorted). The code used to generate the map is extremely simple:
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 43.828430, lng: 18.3445995},
zoom: 18
});
new google.maps.Marker({
position: {lat: 43.828430, lng: 18.3445995},
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9zhNUfid1PgR6FZ-g8xTp_NCqV3JvsHM&callback=initMap" async defer></script>
Any ideas?
Idk why, but when I tried your code, it worked but the map was also gray. When I pointed style="width:500px;height:500px" map become working
Okay so the problem was that I had a bad CSS rule that was interfering with google's rendering.
For reference it was 100% max width on img.
I am using the Google Maps Javascript API to render a map and display a set of location markers on it. To reduce the amount of data being returned through the AJAX request that gets the locations I am sending the coordinates of the bounding box in the request to return only the visible locations.
I currently have code along the lines of:
google.maps.event.addListener(Map.map, "bounds_changed", function() {
Map.bounds.north = Map.map.getBounds().getNorthEast().lat();
Map.bounds.east = Map.map.getBounds().getNorthEast().lng();
Map.bounds.south = Map.map.getBounds().getSouthWest().lat();
Map.bounds.west = Map.map.getBounds().getSouthWest().lng();
});
Which as I understand how getBounds works should update Map.bounds (which is being sent to the server to retrieve the data) when the map is moved. However I cannot get it to set Map.bounds when the map is created, so the initial request for locations fails. If i call Map.map.getBounds outside of google.maps.event.addListener I get an error that getBounds is undefined. How can I set the bounds once the map has loaded, before the user interacts with it?
(I also tried "idle" in addition to "bounds_changed" with the same results)
The Google Maps Javascript API is event based. If you call getBounds on the map before the first bounds_changed event fires, it won't work. Any time after it is set for the first time will work.
Example:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 42,
lng: -72
},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="get bounds" onclick="document.getElementById('bounds').innerHTML = map.getBounds().toUrlValue(6);" />
<div id="bounds"></div>
<div id="map"></div>
Note: I thought it would be better to make a new question on this.
So I recently asked a question about why Google maps is not rendering properly. Now the answer would seem straight forward and simple, accept my code looks like this:
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);
google.maps.event.trigger(map, "resize");
}
google.maps.event.addDomListener(window, 'load', initialize);
The issue is the map is still broken:
This map is stored in a <div id="Map"></div> which has a height of 350. This Div that holds the map is part of Jquery-UI Tabs, so it also has jquery skinning attached to it which may affect things like size and so on.
With that said the map should just work.
If I open the console and throw in: google.maps.event.trigger(map, "resize"); the maps then works as expected.
I also had a Google Map (v3) embedded within a jQuery UI Tabs, and had to work around the issue with this fix:
var initialized = false;
$('.tabs').find('.ui-tabs-nav li').each(function() {
if($(this).find('a').text() === 'Location') {
if($(this).hasClass('ui-state-active')) {
initialize();
initialized = true;
} else {
$(this).click(function() {
if(!initialized) {
initialize();
initialized = true;
}
});
}
}
});
Note that initialize() should run your starting map code. There are lots of ways to slice-and-dice the initialization, but the point is that we don't do it until the tab we're looking for ("Location", in this case) is active.
Hi everyone I try to use geolocalization for my webside made with joomla
I obtained the latitude and longitude and fine... But dont show me any map
In my code I am drawing the map inside a div
this is my code
<script type="text/javascript">
function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions= {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marcador = new google.maps.Marker();
marcador.setPosition(pos);
marcador.setMap(map);
}, function() {
alert("su navegador no acepta geolocalización");
});
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
in my head I have this
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2'></script>
and his in my body
<div id="map"></div>
I have been read other post with the same problem, but I don't find the error in my code.
Thanks
There are some small errors in your code - hint: try using the Javascript console in Chrome to see these errors:
You do not have 'pos' defined here: marcador.setPosition(pos);
...and you want to create a marker with it, so you have to use the LatLng object
give your div a width and height (if you have not done it in your CSS file)
Here is a JSFiddle with all there errors fixed
Where is pos defined? This will most likely cause a JS error which will prevent the map displaying.
marcador.setPosition(pos);
Give your div a size(width and height):
<div id="map" style="width:400px;height:300px"></div>
You need to set width and height values for your #map and make sure the init() is called
here my jsfiddle : http://jsfiddle.net/3MTtc/1/