I'm initialising the map like this:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
originalCenter: new google.maps.LatLng(56.4611388, -2.9719832)
}
map = new google.maps.Map(map_canvas, map_options)
The map appears fine on every browser (including Safari Mobile) except Safari (mine is 7.0.3) on OS X. You can check out my page here.
I did some searching and found similar issues with Safari and Google Maps but to no avail.
Related
I am unable to view the rotation icon when I create a google map setting the
type id to satelite as shown below.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 0
});
Can anyone please help me with this
Per Google maps docs:
rotateControl enables/disables the appearance of a Rotate control for
controlling the orientation of 45° imagery. By default, the control's
presence is determined by the presence or absence of 45° imagery for
the given map type at the current zoom and location. You may alter the
control's behavior by setting the map's rotateControlOptions to
specify the RotateControlOptions to use. You cannot make the control
appear if no 45° imagery is currently available.
Also, rotateControl appears only if zoom is high enough. For example, this map will not show rotateControl:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -37.8136, lng: 144.9631},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
But if you zoom it a bit more, it will show rotateControl:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: -37.8136, lng: 144.9631},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
I'm showing a Google Map within a div using the code below. When the page loads the map appears to bounce around before settling. Is there a way to stop this behavior? The page is here.
function initialize() {
myform.search.focus();
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
The following works for me:
initially set the visibility-style of #map_canvas to hidden
Then wait for the tilesloaded-event to show the map(with a short delay):
google.maps.event
.addListenerOnce(map,
'tilesloaded',
function(){var that=this;
setTimeout(function(){
that.getDiv().style.visibility='visible'},
100);
});
My custom map control is showing up behind the map on mobile devices.
When you move the map around with you finger you can see the control behind the map, when you stop moving the map it disappears behind the map. Everything works fine on desktop browsers.
Does anyone know if there is a setting or css that I can add to force it to be in view on mobile devices?
var mapOptions = {
center: new google.maps.LatLng(39.964885,-104.613528),
zoom: 5,
maxZoom: 24,
mapTypeControl: false,
mapTypeId: opts.mapType,
streetViewControl: false,
panControl: false
};
// Initialize map, infowindow and create default marker icon
map = new google.maps.Map( elem, mapOptions );
var controlDiv = document.createElement('div');
var controls = $("<div></div>")
.attr("id","mbb-map-control-wrapper")
.css({
"margin-top": 5
})
.appendTo(controlDiv);
var showMore = $("<span>Show More</span>")
.attr("id","mbb-showmore-btn")
.appendTo(controls);
$(showMore).click(function(){
$(elem).trigger("map_show_more");
});
var searchHere = $("<span>Search Here</span>")
.attr("id","mbb-searchhere-btn")
.css({
"margin-left": 10
})
.appendTo(controls);
$(searchHere).click(function(){
$(elem).trigger("map_search_here");
});
$("<div></div>").addClass("mbb-clear").appendTo(controls);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
This is my javaScript code.
(function() {
window.onload = function() {
// Creating a reference to the mapDiv
var mapDiv = document.getElementById('map');
// Creating a latLng for the center of the map
var latlng = new google.maps.LatLng(37.09, -95.71);
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
center: latlng,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(mapDiv, options);
}
})();
When i add the disableDefaultUI: true to the options variable and test it on my Browsers(Opera,Firefox,Chrome Canary) it does not disable the UI. I am currently using Eclipse Indigo on My Mac OSX version 10.6.8. Is there a problem with my browsers cache or something? My code seems to be okay. I can't understand why it does not render on the browsers.
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
I can't remember exactly why the disableDefaultUI property didn't do anything on maps I've worked on recently. The way I got round it was to control each ui element directly.
var options = {
// Required map properties here
// Set how Zoom is to look
zoomControl : true,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.SMALL,
position : google.maps.ControlPosition.TOP_LEFT
}
}
While the example above modifies the Zoom controls to the compact plus and minus rather than slider, you can turn if off using:
zoomControl : false
All the other UI elements have these type of controls also. You can see them all here
I'm currently upgrading to the "new" HTML5 version of Google Maps Geolocation API and I have some problems. The function works perfectly on my computer but not on my phone with the Safari browser. The code is as follows:
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var speed = position.coords.altitude;
var coords = new google.maps.LatLng(latitude, longitude);
alert(position.coords.speed);
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('weather-map'), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map
});
});
} else {
alert('Geolocation API stöds inte i din webbläsare');
}
If I set an alert() right after if(navigator.geolocation) { and update the page on my phone, the alert window will appear but if I move the alert() and set it after navigator.geolocation.getCurrentPosition(... it will not show. I have tested if the browser is capable to this API and it is.
How can I fix this problem?
Thanks in advance.
I got it working! :) I missed some important lines like the functions initialize() and show_position(p) to get the position through Stan Wiechers "geo-location-javascript".