Search code examples
javascriptphplaravelgoogle-maps-api-3infobox

Google Map API marker not appearing on map on mobile


I am using Google Map Javascript API with marker clustering and InfoBox on a Laravel Website

https://developers.google.com/maps/documentation/javascript/marker-clustering

The native red marker shows properly on desktop but doesnt appear on mobile. However if i click at the location where it should be, my infobox does appear and everything else if ok.

Is there a special setting to be taken into account (as maybe the png used for this marker on mobile display or else?)

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
 
  var marker = new google.maps.Marker({position: uluru, map: map,icon: image});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>


Solution

  • After checking, it was not related to Google Map but to my server .env environment file (I am using Laravel)

    APP_URL variable was refering to 'localhost' in .env file and this APP_URL variable was used in Javascript code (using PHP-Vars-To-Js-Transformer) for retrieving some server img ressources: This caused on desktop the ressources to be properly loaded on google map api but not on mobile.

    Replacing localhost by my website url in .env file solved the issue.