Question

I've used the "Share and Embed" map option to put a map on a site I'm developing (from the cog at the bottom of the "new" Google Maps:

MapsShareAndEmbed

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2426.5340551802665!2d-1.3732330000000013!3d52.541864000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48775aa3a9b0d003%3A0x733a43420fa646be!2sAT+Home+Furniture!5e0!3m2!1sen!2s!4v1392282549357" width="600" height="450" frameborder="0" style="border:0"></iframe>

On desktop, it works fine, you can click on "View on Google Maps" and it works as you'd expect and shows the shop location on Google Maps. However, when you click this link on a mobile device (Nexus 5, iPad 3, Nexus 7), it just opens the Google Maps app to the general area, and people have to then type a search in manually to find the shop (screenshot of what appears is below).

Surely this isn't a bug with Google Maps? What have I done wrong? Do other people experience this in the same way?

The link to the site currently is: AT Home Furniture

2014-02-25 EDIT - If there's no way to fix this (Google have surely overlooked something here?!), then is it possible to replicate this (a map customised to the user if they're logged in) with the API? If you view the site you should see this in action, but it's the standard functionality of Google Maps when embedded in an iFrame.

2014-02-26 EDIT - If I use the Google Maps API, how would I go about putting a link to the "full map" (open it in Google Maps) which worked on desktop AND mobile?

Google Maps Embed Broken On Mobile Devices

Was it helpful?

Solution

You can use a custom map API info window to display the share map link etc.

See example here: http://jsfiddle.net/PEHba/7/

You can add as many markers you want. Just put lines 8-13 in a loop. All the information to be displayed when clicked on the marker has to be contained inside the marker. When clicked, we use this.xyz to access them.

google.maps.event.addDomListener(window, 'load',       function() {
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    {
        center: new google.maps.LatLng(52.54215, -1.37335),
        zoom: 14
    });
    //add a marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(52.542151, -1.373351),
        map: map,
        title:"Hello World!",
        View_on_Google_Maps_link: 'https://www.google.com/maps/place/AT+Home+Furniture/@52.541864,-1.373233,16z/data=!4m2!3m1!1s0x0:0x733a43420fa646be?hl=en-GB'
    });

    //attach a click event to the marker to display the info window.
    google.maps.event.addListener(marker, 'click', function() {
        //create a info window to show when a maker is clicked
        var infowindow = new google.maps.InfoWindow({
            content: '<div>Share link: '+ this.View_on_Google_Maps_link +'.</div>'
        }); 
        infowindow.open(map,this);
    });



});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top