French Googlemap javascript api et multi polylines

yfleury

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: 144
yfleury

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

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

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

Serge Bertet

Active Member
Licensed User
drgottjr said:
ce n'est pas une bonne idee de montrer ta clef d'access a l'api de google maps
Click to expand...
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.
 
You must log in or register to reply here.

Similar Threads

herve joly
French données texte entre PHP et B4A
Replies
0
Views
2K
herve joly
herve joly
B
French Compiler avec SQLite
Replies
6
Views
2K
Beber
B
M
German HttpS Upload Probleme
Replies
10
Views
2K
mw71
M
carlos7000
Spanish Error al compilar Script del Designer
Replies
0
Views
1K
carlos7000
carlos7000
JPP
French Pages multiples
Replies
6
Views
2K
klaus
klaus
Top