French Googlemap javascript api et multi polylines

yfleury

Active Member
Licensed User
Longtime User
Bonjour. Je tente ma chance au cas ou il y aurait quelqu'un ici qui connait javascript.
J'ai créer un server web avec b4j. Je créer une clé pour googlemap pour javascript et j'ai réussi a faire un un tracer polyline avec ce code.
HTML:
<html>
  <head>
    <title>Simple Polylines</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <style>
    #map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
} </style>
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg-xxxxxxxxxxxxxxxx&callback=initMap&v=weekly"
      defer
    ></script>
    <script>
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: { lat:48.8962543233219, lng: -72.2049664505708},
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
            {lat: 48.8961213046606, lng: -72.2032605103323},
            {lat: 48.8963408613577, lng: -72.2046641341174},
            {lat: 48.8962543233219, lng: -72.2049664505708},
            {lat: 48.8956942499082, lng: -72.2061326119267},
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
</script>
  </body>
</html>

Cependant, je dois créer plusieurs polylines sur la map. Mettez sur une piste, parce que je galère. Merci
 

Attachments

  • Capture d’écran 2022-12-14 202436.jpg
    Capture d’écran 2022-12-14 202436.jpg
    12.7 KB · Views: 77

yfleury

Active Member
Licensed User
Longtime User
J'ai essayer de simplifier parce que j'ai plus de 500 polylines a tracer sur google map.
Rien ne s'affiche. Voici le code source de la page web généré par le serveur. J'ai surement loupé quelque chose. n'oubliez pas de changer la Key si vous testé
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Trace routes</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script-->

</head>

<body>

<div id="map">
</div>

    <!--
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxx&callback=initMap&v=weekly"
      defer
    ></script>
   
<script>


    var map;
    var mapBounds;

    var Path = []; // Les tracks
    var bounds = []; // bounds des tracks

    var latLng = [];

    var groupsCount = 0;

    function initMap() {

        // Create an info window to share between markers.

        map = new google.maps.Map(document.getElementById("map"), { mapTypeId: "terrain" });

        latLng1 = new google.maps.LatLng(48.891941, -72.254960);
        latLng2 = new google.maps.LatLng(48.867259, -72.195921);

        mapBounds = new google.maps.LatLngBounds();
        mapBounds.extend(latLng1);
        mapBounds.extend(latLng2);
        map.fitBounds(mapBounds);

        const route_0 = [
            { lat: 48.8961213046606, lng: -72.2032605103323 },
            { lat: 48.8963408613577, lng: -72.2046641341174 },
            { lat: 48.8962543233219, lng: -72.2049664505708 },
            { lat: 48.8956942499082, lng: -72.2061326119267 },
            ];
            Path[0] = new google.maps.Polyline({
            path: route_0,
            geodesic: True,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
        });
        const route_1 = [
            { lat: 48.8712519291321, lng: -72.1967549344169 },
            { lat: 48.871781297861, lng: -72.1973390860191 },
            ];
            Path[1] = new google.maps.Polyline({
            path: route_1,
            geodesic: True,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
        });
        const route_2 = [
            { lat: 48.8809533084535, lng: -72.1998454523393 },
            { lat: 48.8809364536433, lng: -72.1998982809886 },
            { lat: 48.8803961577035, lng: -72.2010854799981 },
            ];
            Path[2] = new google.maps.Polyline({
            path: route_2,
            geodesic: True,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
        });
       // Init les groupes de traces
         Path[0].setMap(map);
         Path[1].setMap(map);
         Path[2].setMap(map);
 
       
    }

    window.initMap = initMap;

</script>


</body>
</html>
 
Last edited:

yfleury

Active Member
Licensed User
Longtime User
J'ai réglé le problème. j'ai commenter le geodesic: True, et tout mes polylines s'affiche.
JavaScript:
            Path[0] = new google.maps.Polyline({
            path: route_0,
       //     geodesic: True,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
 

drgottjr

Expert
Licensed User
Longtime User
on est tous des confreres au forum, mais ce n'est pas une bonne idee de montrer ta clef d'access a l'api de google maps. le forum est ouvert et "rechercheable" sur google. la, c'est la jungle.
 

Serge Bertet

Active Member
Licensed User
ce n'est pas une bonne idee de montrer ta clef d'access a l'api de google maps
Bof, la clé est associée à un nom de domaine elle ne fonctionnera pas ailleurs.
De toutes façons elle est visible dans le source de la page, tout le monde peut la voir.
 
Top