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);
Related
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.
I need to include pan effect and zoom effect without the help of control tools. The implementation in mobile and tablet so i dont need that tool bars instead of that touch zoom and drag panning effects are needed. Is it possible to implement ? Looking for suggestions
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 10,
maxZoom : 24,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false
}
Here is the code:
Just add disableDefaultUI: true
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true, // <- this
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
Example
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".
I have a map in which I apply a custom overlay using KMbox overlay to signify where I think the users general point of interest lies. What I want is to display this map to the user and allow them to click on the map to give me an exact location match of their POI.
This all works fine except for when the user clicks on the map and changes the zoom of the map.
Here's my code to add the marker to the map.
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.remove();
}
if(last_marker)
{
last_marker.setMap(null);
}
marker = new google.maps.Marker({
position: location,
map: map
});
// Keep track for future unsetting...
last_marker = marker;
}
And to show the map I have this function.
function show_map(lt, ln, zoom, controls, marker)
{
var ltln = new google.maps.LatLng(lt, ln);
var vars = {
zoom: zoom,
center: ltln,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: controls,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN} ,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), vars);
KmOverlay = new KmBox(map, new google.maps.LatLng(lat, lon), KmOpts);
var totalBounds = new google.maps.LatLngBounds();
totalBounds.union(KmOverlay.getBounds());
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
I have a working example at the following link here
fixed this by using the setMap() method on the KmOverlay and passing null as a parameter.
eg:
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.setMap(null);
}