Redirect user to Google Maps app

Question

I’m developing a responsive website and using the Google Maps API to generate the company location map.

I would like when the usurer was accessing the site by a mobile device and the same clicked on the map or even a link, was redirected to the Google Maps application and transfer the route, so he would not need to enter the address and search.

var myCenter = new google.maps.LatLng(-7.0995734, -34.8410316);
 function initialize()
    {
      var mapProp = {
      center: myCenter,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
   var marker = new google.maps.Marker({
                position: myCenter,
            });
           marker.setMap(map);
        }
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

I think this code would solve your problem:

javascript:window.open("geo:"+latitude+","+longitude+"" , "_system");

It offers the native option and the google maps for the user, and if you want to open it on iOS:

 javascript:window.open("maps://maps.apple.com/?q=:"+latitude+","+longitude+"");

You can for example create one that receives values in lat long if it is dynamic, but from what I saw your data are static, so it is simpler, go to your html and enter this example code:

<div class="meuMapa"> 
  <a onclick="javascript:window.open('geo:-7.0995734, -34.8410316', '_system')> Clique aqui para abrir seu mapa
  </a>
</div>

Or simply you call a function in your onclick where it checks the device type, for example:

var devicePlatform = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";
if((devicePlatform == iPhone) || (devicePlatform == iPad))
{
   /*sua chamada de função*/
}