I have a Google Map working perfectly on a Dynamic Page - on the desktop. But when I go to the MOBILE EDITOR, the Map does not work correctly. It does not center and it does not show the location. Is additional code required for the Map to work right on the Mobile site?
Please elaborate more on the issue, like what Google Maps function are you using and add screenshots of desktop and mobile so we can see what is happening, otherwise it is just guess work.
However, if it is working on desktop preview and sites on desktop, then in theory it should be working on the mobile editor preview and on mobile devices, providing that is the customised Google Maps function can be used on mobile devices and you have it setup correctly in the mobile editor itself.
If you want things to work on a certain device, then you can code it using Wix Window API and the formFactor function.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
Mobile only code examples.
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
Finally, if you look at Google Maps own pages you will find relevant info yourself.
https://support.google.com/maps/thread/10355779?hl=en
Plus from Stack.
https://stackoverflow.com/questions/10090731/google-maps-api-v3-custom-markers-not-clickable-on-mobile-devices
ISSUE RESOLVED…kinda. I phoned GoDaddy and they said it’s a known issue of embedded google maps not working on mobile and they’re working to resolve the situation. It’ll most likely need an update of the Google Chrome operating system, which is a big fix, but Google and GoDaddy know it’s a big enough issue that they are working to find a solution in their next update. The only problem with my code was that random extra googleapi line that I have since deleted
https://stackoverflow.com/questions/29836118/custom-google-map-not-working-on-mobile-site
The Map is coded to geolocate each address from a dataset and pinpoint that location on the Dynamic page. It works perfectly as shown on this sample dynamic page:
On the Mobile version, the Dynamic page works fine except the map shows up zoomed out on the ocean and even with manual centering, does not show the location. Google Map support person looked through the code already and saw no errors and could not explain the problem - except to say that using a combination of WIX built in Map plus custom code often creates issues…
import wixData from ‘wix-data’;
import {getLocationByAddress} from ‘backend/getLocationByAddress’;
import {getFormattedLocation} from ‘backend/getFormattedLocation’;
$w.onReady( function () {
$w(“#Artists”).onReady( () => {
let currentItem = $w(“#Artists”).getCurrentItem();
let tags = currentItem.tags;
if ( currentItem.tags.includes(‘teacher’) ) {
$w(‘#classes’).show();
} else {
$w(‘#classes’).hide();
}
setLocation(currentItem);
} );
} );
function setLocation($item) {
let lctn;
let name = $item.fullName;
let address = $item.address.formatted;
console.log(‘>>>>> getLocation <<<<<’);
getLocationByAddress(address)
.then(location => {
lctn = {“latitude”: location.lat,
“longitude”: location.lng,
“description”: name + ‘, ’ + address};
console.log(’>>>>> inside getLocation <<<<<‘);
console.log(‘latitude = ’ + lctn.latitude);
console.log(‘longitude = ’ + lctn.longitude);
console.log(‘address = ’ + lctn.description);
$w(“#googleMaps”).location = lctn;
});
}
function readLocation($item) {
console.log(’>>>>> readLocation 0 <<<<<’);
let lctn;
let name = $item.fullName;
let address = $item.address.formatted;
getLocationByAddress(address)
.then(location => {
console.log(’>>>>> readLocation 1 <<<<<’);
lctn = {“latitude”: location.lat,
“longitude”: location.lng,
“description”: name + ‘, ’ + address};
console.log(’>>>>> readLocation 2 <<<<<');
$item.location = lctn;
});
}