php - Array fra PHP til JS og GMaps - Udvikleren.dk - Programmering, webdesign og grafik

Tags: google-maps php js

Bruger #15663 @ 01.05.14 12:42

Hejsa.

Det driller virkelig det her.

Jeg skulle meget gerne have et array fra min xml fil.
Dette array skal jeg så have sendt videre til mit javascript så jeg kan placere nogle markers på et google maps.

Den vil dog intet af det som jeg vil.
Den melder kun fejl. ( TypeError: 'undefined' is not an object (evaluating 'myArray['latitude']') ).

Er der en klog man der kan hjælpe?

JScript kode

 <?php 
 
 $xml = simplexml_load_file('stops.xml');
 
 $data = array();
 
 foreach ($xml as $key) {
     
     $data['name'][] = (string)$key->navn;
     $data['latitude'][] = (string)$key->wgs84koor->latitude;
     $data['longitude'] = (string)$key->wgs84koor->longitude;
 }
 
 //var_dump($data);
 
 
 ?> 
 <!DOCTYPE html>
 <html>
   <head>
     <title>KOLDING MAP</title>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <style>
       html, body, #map-canvas {
         height: 100%;
         margin: 0px;
         padding: 0px
       }
     </style>
      <script type="text/javascript"
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41mptNBILxXLpL4MTr1uFOwqubOCR-mE&sensor=true">
     </script>
     <script>
         var map;
         function initialize() {
               var mapOptions = {
                 zoom: 13,
                 center: new google.maps.LatLng(55.495363, 9.484839)
               };
               map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
               
               
               var myArray = <?php echo $data[] ?>;
               var arrayLength = myArray.length;
               
               for(var i = 0; i < arrayLength; i++){
                   
                   var marker = new google.maps.Marker({
                       position: new google.maps.LatLng(myArray['latitude'][i], myArray['longitude'][i]),
                       map: map,
                   });
               }
               
         }
 
         google.maps.event.addDomListener(window, 'load', initialize);
         
         
     </script>
   </head>
   <body>
     <div id="map-canvas"></div>
   </body>
 </html>

Den ligger live på http://mautone.dk/xml

6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #4879 @ 01.05.14 12:56

227

Du forsøger at 'echo' et PHP array, men det kan du ikke, da den funktion er lavet til at udskrive strings.
Du skal spytte det ud som JSON for at kunne bruge det i JavaScript. Benyt json_encode().

Indlæg senest redigeret d. 01.05.2014 12:56 af Bruger #4879

Bruger #4879 @ 01.05.14 13:11

227

Jeg er desværre ikke så meget inde i Maps API'en, men kan se, at der i hvert fald er noget galt med den måde du beriger $data-arrayet med data.

I longitude-linjen ser det ud til at mangler []. For-løkken ville med rettelsen se således ud:

PHP kode

 foreach ($xml as $key) {
      
      $data['name'][] = (string)$key->navn;
      $data['latitude'][] = (string)$key->wgs84koor->latitude;
      $data['longitude'][] = (string)$key->wgs84koor->longitude;
  }

Jeg havde desuden nok valgt at oprette et nyt element til hver "position" og så have et sub-array indeholdende name, latitude og longitude. Som fx

PHP kode

 foreach ($xml as $key) {
      
      $data[] = Array(
                   'name'      => (string)$key->navn,
                   'latitude'  => (string)$key->wgs84koor->latitude,
                   'longitude' => (string)$key->wgs84koor->longitude,
                );
  }

Men det er nok mere en smagssag, for dit nuværende ville også kunne fungere. Hvis du retter det til, så den benytter subarray, så husk at rette din JavaScript til også.

Indlæg senest redigeret d. 01.05.2014 13:12 af Bruger #4879

Bruger #15663 @ 01.05.14 13:04

415

Super.

Det er rettet.

Nu skal jeg så bare have den til at vise alle de markers ud fra latitude og longitude som nu er i det der json format.

Hvordan gør jeg så det?

Bruger #15663 @ 01.05.14 13:24

415

Det hjalp meget på læsbarheden.

Hmm. så er det kun det der api der driller. for den smider intet ind

SÅ blev det løst.
Det var ændringen på arrayet der lavede det hele også blot lige at flytte i på den rigtige plads.

Endelig kode ser således ud:

JScript kode

 <?php 
 
 $xml = simplexml_load_file('stops.xml');
 
 $data = array();
 
 foreach ($xml as $key) {
       
       $data[] = Array(
                    'name'      => (string)$key->navn,
                    'latitude'  => (string)$key->wgs84koor->latitude,
                    'longitude' => (string)$key->wgs84koor->longitude,
                 );
   }
 
 //var_dump($data);
 
 ?> 
 <!DOCTYPE html>
 <html>
   <head>
     <title>KOLDING MAP</title>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <style>
       html, body, #map-canvas {
         height: 100%;
         margin: 0px;
         padding: 0px
       }
     </style>
      <script type="text/javascript"
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41mptNBILxXLpL4MTr1uFOwqubOCR-mE&sensor=true">
     </script>
     <script>
         var map;
         function initialize() {
               var mapOptions = {
                 zoom: 12,
                 center: new google.maps.LatLng(55.495363, 9.484839)
               };
               map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
               
               
               var myArray = <?php echo json_encode($data); ?>;
               var arrayLength = myArray.length;
               
               for(var i = 0; i < arrayLength; i++){
                   
                   var marker = new google.maps.Marker({
                       position: new google.maps.LatLng(myArray[i]['latitude'], myArray[i]['longitude']),
                       map: map,
                   });
               }
               
         }
 
         google.maps.event.addDomListener(window, 'load', initialize);
         
         
     </script>
   </head>
   <body>
     <div id="map-canvas"></div>
   </body>
 </html>

Indlæg senest redigeret d. 01.05.2014 13:31 af Bruger #15663

Bruger #4879 @ 01.05.14 13:27

227

Okay, godt det blev løst!

Indlæg senest redigeret d. 01.05.2014 13:33 af Bruger #4879

Bruger #15663 @ 01.05.14 13:55

415

Hej Kristian.

Koden ligger der allerede

Jeg har dog tilføjet en adresse til en oio database hvor alle stoppesteder findes.

Array fra PHP til JS og GMaps

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler