I decided I'd give the new Visual Refresh that was announced at Google I/O 2013 a try, since all it takes to get the new basemaps/UI is a single property/query string.
JavaScript API
function initializeMap() {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
google.maps.visualRefresh = true;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
-- OR --
Static Maps API
https://maps.googleapis.com/maps/api/staticmap?center=1600%20Amphitheatre%20Parkway%20Mountain%20View,%20CA%2094043&size=400x400&sensor=false
And it worked great, my maps now use the new basemap tiles and UI.
However since the change, when I open an InfoWindow on a mobile device (using the Javascript API), the close button in the top right hand corner of it doesn't seem to respond any longer. Has any one else observed this? I'm trying to find out if it's a bug with my code or with Google's.
UPDATE:
Here's a basic Fiddle I'm using to test with. Works on Chrome, IE & Firefox but not on mobile devices (Only been able to try android so far)
http://jsfiddle.net/vG3WE/1
I noticed the same effect on some Apple devices. Consider this as a very dirty hack, but if you don't want to wait until this bug is fixed, you can implement the close event yourself so that it should also work on mobile devices:
First of all you need to define an ID for your info window content (you'll need that later on)
var contentString = '<div id="infowindowContent">You should be able to close me</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Then you need to attach a listener for the domready-event of this infowindow. Cause if this event is fired, you know that the info window is attached to the DOM and you can start implementing the following hack:
google.maps.event.addListener(infowindow, 'domready', function() {
var infowindowCloseButton = $($($("#infowindowContent").parents()[2]).children()[0]);
infowindowCloseButton.click(function(){
infowindow.close();
});
});
What we do is pretty simple: We just navigate to the close button of the infowindow and attach a mouseclick event to close this infowindow.
I put together a small example:
http://chatmap.eu/playground/closeInfoWindows.html
As I said: It is very dirty but it worked for me.
Related
Hello,
I would like to disable the local zoom of google map on tablet android.
I use the click for another use, also i don't want to see this partiel zoom.(you can see photo of my android tablet)
I have no problem with my PC or my iPhone anywhere.
what can I do ?
Thanks a lot.
Trachy
Here is the configuartion of the map:
var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
var optionsCarte = {
zoom: zoominitialcarto,
center: centreCarte,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDoubleClickZoom: true,
clickableIcons:false,
streetViewControl:false,
draggable:false,
};
mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);
I think my problem concern the "one finger zoom".
But in fact, I don't realise application specially for Android, I use googlemap Api http://maps.google.com/maps/api/js?sensor=false
Also I can't use mymap.getUiSettings().setZoomGesturesEnabled(false); because this function is not in the API.
I don't really understand why "the one finger zoom" can be active on the map, because I don't load GV3 API Android.
An idea to solve the problem ? Thanks Trachy
The function mymap.getUiSettings().setZoomGesturesEnabled(false) will not work in your code because this function is for Android API not in javaScript.
Here is the documentation of Google Maps JavaScript API that shows the different controls.
For more information, check this related SO question:
Toggling zooming and panning ability on Google Maps.
Disabling pinch-zoom on google maps
I'm writing a cross-platform mobile app with Titanium (v5.0.4, sdk 5.1.2GA). The app displays a map with markers for points of interest close to current location. If the user moves the map to a new region, all previously displayed markers are removed and a new set of markers is calculated and displayed, according to the new location. The user can click on a marker, and have an infoWindow appear. Clicking the infoWindow opens a new window for further informations.
This works fine on IOS (with MapKit). However, on Android (with Google Maps), clicking on a marker displays the infoWindow, but also centers the map on the marker, which triggers 'regionchanged' event, which causes my app to remove markers and display a new set. Basically, the user can never click the infoWindow nor reach the new window for further informations.
What I'd like to do: prevent Google Maps from auto panning to a marker when clicking on it.
Alternatively, is there a way to make a distinction between a 'regionchanged' event fired after clicking a marker, and a 'regionchanged' event triggered by the user moving the map? This would allow me to react only on the latter.
I've found this (Impossible to prevent auto panning to a marker when clicking on it (google maps)) but this is ruby on rails. Something else I came accross (can't find back the link, though) involved overloading the 'click' event handler or using the disableAutoPan infoWindow option (Google Maps: How to prevent InfoWindow from shifting the map), but this were all for the Javascript API.
So, has someone any idea?
I recently had the same problem. Although it's been a long time since you asked the question, I think the solution is worth noting here.
Make the map view respond to both click and regionchanged events
<View id="mapView"
module="ti.map"
onClick="click"
onRegionchanged="regionChanged"
method="createView">
</View>
Use a flag variable that both event listeners have access to.
var clicked = 0;
click event sets the variable.
var click = function(e) {
clicked = 1;
...
}
Wrap the functionality of regionchanged event with _.defer(...).
var regionChanged = function(e) {
_.defer(function(){
... (regionchanged code goes here)
});
}
regionchanged code should not execute if the variable is set.
var regionChanged = function(e) {
_.defer(function(){
if (clicked == 0) {
... (regionchanged code goes here)
}
});
}
Unset the variable at the end of the regionchanged code.
var regionChanged = function(e) {
_.defer(function(){
if (clicked == 0) {
... (regionchanged code goes here)
}
clicked = 0;
});
}
Here defer somehow makes sure when both events are fired (it seems to) regionchanged event comes after the click event. I think that may not always be the case but my tests didn't fail me yet.
And I know I could use boolean for clicked :)
I am using HERE Maps to show a map letting users choose a location of interest. It works fine on desktop, but on mobile devices I am experiencing some problems.
On Android devices, if I create a map using
var map = new nokia.maps.map.Display(document.getElementById("map"), {
// Initial center and zoom level of the map
center: startCoordinate,
zoomLevel: 5,
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.ScaleBar()
]
}
);
the browser freezes after a few seconds. You can test this at karmap.com; try to scroll down to the very bottom to find the map. If I remove the code shown above the browser won't freeze anymore (but I won't get the map, of course).
Another problem occurs, when loading the page on iOS devices; in the form at the bottom you can find an input box named "Place of Birth". After typing 3 letters or more I start an ajax request to find suitable city names. This doesn't work if I use the following code (right under the code snippet to create the map):
map.removeComponent(map.getComponentById("zoom.MouseWheel"));
map.set("baseMapType", map.SATELLITE); // Activates satellite imagery on the display
If I comment that code out, the ajax calls work fine.
For me, that is some strange side effect! Does anyone have a clue what is going on?
Thanks for any help or advice!
I'm Using sencha Architect (sencha touch 2) and when creating a simple infowindow in a google map it displays all the google controls (undo arrow, +, -, zoom controls) next to the closing 'x'.
This only bugs in android (4.0.3) browser, in chrome or firefox on my pc works fine.
I uploaded the Sencha Architect project here
Here's the code for creating and displaying the infowindow.
var map = this.getGoogleMap().getMap();
var center = map.getCenter();
var iw = new google.maps.InfoWindow();
iw.setContent('<p> Test </p>');
iw.setPosition(center);
iw.open(map);
Any ideas on why is this happening?
EDIT:
Here's how it looks
I got rid of the unwanted icons by adding 2 br tags after the content.
Like so: "iw.setContent('Test [br][br]');" (The [] must be replaced with a <>)
This bug came with the last google maps update aprox. a month ago.
Im writing a small webapp based on the idea of openspot for training proposal.
When I open the map with my desktop pc everything is fine, but when I open it with my HTC Desire and add a marker the map hangs.
You can find a demo here (in german)
http://park-a-lot.de
Just go to "eintragen" and set a marker.
Then go hack and click on "parkplatze".
You'll see the issue.
Its ok that the toolbar at the top hides when you move the map, because of a jqtouch bug with Google maps.
Thank you in advance.
This solution may help. I know it works great in the ipod safari browser and Opera on an HTC Android phone.
http://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers
Having lots of markers on the map does really slow it down on android. One thing you can try is to only show the relevant markers, i.e. those that are in the bounds of the map. In my case this made the map much less sluggish:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
for (id in stations) {
var marker = stations[id].marker;
var isVisible = marker.getVisible();
var shouldBeVisible = bounds.contains(stations[id].latLng);
if (isVisible != shouldBeVisible) {
marker.setVisible(shouldBeVisible);
}
}
});