javascript - Google map - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript mysql

Bruger #16819 @ 22.01.16 17:10

Jeg vil gerne implementere google map på min webside, og har fundet nedenstående script. Scriptet virker som det skal, men hvordan får jeg indsat adresserne fra min database. Evt via php.
Jeg kender desværr ikke til javascript, men til php

PHP kode

 <?php 
 if ($antal >= 1) {
 while ($row = $stmt_row->fetch()) {
 $name = $row['name'];      $address = $row['address']; $postal = $row['postal']; $city = $row['city'];$contact = $row['contact']; $mobile = $row['mobile'];$pl_date = $row['pl_date']; 
 $adresse = "'".$name.", ".$address.",".$postal.",".$city."',";  
 //$adresse_2 = array($address, $postal, $city);
 ?>

JScript kode

 <script type="text/javascript">    
   var delay = 100;
   var infowindow = new google.maps.InfoWindow();
   var latlng = new google.maps.LatLng(55.6760968, 12.5683371);
   var mapOptions = {
     zoom: 4,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   
   var geocoder = new google.maps.Geocoder(); 
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var bounds = new google.maps.LatLngBounds();
 
   function geocodeAddress(address, next) {
     geocoder.geocode({address:address}, function (results,status)
       { 
          if (status == google.maps.GeocoderStatus.OK) {
           var p = results[0].geometry.location;
           var lat=p.lat();
           var lng=p.lng();
           createMarker(address,lat,lng);
         }
         else {
            if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
             nextAddress--;
             delay++;
           } else {
                         }   
         }
         next();
       }
     );
   }
  function createMarker(add,lat,lng) {
    var contentString = add;
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
            }); 
 
   google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.setContent(contentString); 
      infowindow.open(map,marker);
    });
 
    bounds.extend(marker.position);
  }
 
   //var locations = <?php echo json_encode( $adresse_2 ) ?>;
   //var locations = [ <?php echo $adresse;?> ];
   var locations = [ 'stradellasvej 22,2450,københavn SV','tartinisvej 2,2450,københavn SV' ]; // Adresser indsættes via mysql
   var nextAddress = 0;
   function theNext() {
     if (nextAddress < locations.length) {
       setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
       nextAddress++;
     } else {
       map.fitBounds(bounds);
     }
   }
   theNext();  
 </script>

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

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 22.01.16 20:13

1.223

fik løst den sådan her¨

Kode

$adresse = array($address, $postal, $city);

det vil kun være 1 addresse ikk

jeg regnede med det var flere addresser du ville udskrive

Kode

<?php
$mysqli = new mysqli('localhost', 'root', '', 'test');
$mysqli->set_charset("utf8");
$ar=array();
$sql = "SELECT * FROM tbl_address";
if ($result = $mysqli->query($sql)) {    
    while ($row = $result->fetch_assoc()) {
		$ar[]=array($row['address'],$row['postal'], $row['city'] );  
    }
    $result->close();
}
?>
var locations = <?php echo json_encode( $ar ) ?>;

hvilke udskriver dette

Kode

var locations = [["stradellasvej 22","2450","k\u00f8benhavn SV"],["tartinisvej 2","2450","k\u00f8benhavn SV"]];

derfor spurgte jeg om dit locations array var korrekt

læg gerne en demo onlilne, så vi kan se det

Bruger #15301 @ 22.01.16 18:23

732

Du kan sagtens gøre som du forsøgte først med

PHP kode

 var locations = [ <?php echo $adresse;?> ];

Her skal du dog huske at den tekststreng, du gemmer i din database skal overholde den samme formatering som "'stradellasvej 22,2450,københavn SV','tartinisvej 2,2450,københavn SV'". Så husk ' foran og efter hver adresse og husk at , seperer de forskellige adresser, og så burde det lykkes

Bruger #16075 @ 22.01.16 18:54

1.223

hvor har du coden fra ??

er du sikker på dette array er korrekt ??

Kode

var locations = [ 'stradellasvej 22,2450,københavn SV','tartinisvej 2,2450,københavn SV' ]; // Adresser indsættes via mysql

jeg havde forvendtet noget JSON ala

Kode

var locations = [["stradellasvej 22","2450","k\u00f8benhavn SV"],["tartinisvej 2","2450","k\u00f8benhavn SV"]];

Bruger #16819 @ 22.01.16 19:59

fik løst den sådan her¨

PHP kode

 while ($row = $stmt_row->fetch()) {
 $name = $row['name'];      $address = $row['address']; $postal = $row['postal']; $city = $row['city'];$contact = $row['contact']; $mobile = $row['mobile'];$pl_date = $row['pl_date']; 
 $adresse = array($address, $postal, $city);

var locate = <?php echo json_encode( $adresse ) ?>;
var locations = [locate];

JScript kode

Bruger #16819 @ 22.01.16 22:40

Hej Ronny
Jeg fik skrev forkert i min php kode den rigtige er her:

PHP kode

 $antal = 0;
 if (isset($_POST['postal_1']) && ($_POST['postal_2'])) {
 $postal_1 = ($_POST['postal_1']);
 $postal_2 = ($_POST['postal_2']);
 $stmt_row = $DBH->query("SELECT * from XXX where upgraded = '0' AND postal BETWEEN $postal_1 AND $postal_2"); 
 $stmt_row->execute(); 
 if ($antal >= 1) {
 while ($row = $stmt_row->fetch()) {
 $adresse = "'".$row['name'].", ".$row['address'].",".$row['postal'].",".$row['city']."',";
 var locate = <?php echo json_encode( $adresse ) ?>;
         var locations = [locate];

Det virker
Hele mit script er her, ligger ikke en demo op da adresserne i min db er reelle kunder.
Scriptet er nok lidt "knoldet" men det virker. Dog kommer der kun max 11 markers frem på mit google map selvom der er langt flere poster???

HTML kode

 <?php
 session_start(); 
 require_once ("config.php");
 $order = "postal";
 
 $antal = 0;
 if (isset($_POST['postal_1']) && ($_POST['postal_2'])) {
 $postal_1 = ($_POST['postal_1']);
 $postal_2 = ($_POST['postal_2']);
 $stmt_row = $DBH->query("SELECT * from XXX where upgraded = '0' AND postal BETWEEN $postal_1 AND $postal_2"); 
 $stmt_row->execute(); 
 $antal = $stmt_row->RowCount();
 $stmt = $DBH->query("SELECT * from XXX where upgraded = '0' AND postal BETWEEN $postal_1 AND $postal_2  order by pl_date"); 
 $stmt->execute(); 
 $antal = $stmt->RowCount();
 }
 ?>
 <!DOCTYPE html!">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
        <meta charset="UTF-8">
         <title>Route planner</title> 
         <link rel="stylesheet" href="css/styles.css" type="text/css" media="Screen" />
         <link rel="stylesheet" href="css/phone.css" type="text/css" media="handheld" />
            <link rel="stylesheet" href="css/print_la.css" type="text/css" media="print" />
         <link rel="shortcut icon" href="css/images/favicon.ico"/>
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     </head>
     <body>
     <div id="wrapper">
     <div id="header">
     <img src="css/images/logo.png" alt="Logo" width="260" height="100" /></div>
     <div id="menu"><?php include_once("css/menu.php"); ?> </div>
     <div id="content">
     <fieldset>
         <legend><p>Search between postals</p></legend>
         <table>
             <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" >
                 <tr>
                     <td><p><label>Postal 1:</p><input type="text" name="postal_1" maxlength="4" placeholder="Type postal" autofocus /></label></p></td>
                     <td><p><label>Postal 2:</p><input type="text" name="postal_2"maxlength="4" placeholder="Type postal" /></label></p></td>
                     <td><br /><input type="submit" value="SEARCH">
                     </td>
                 </tr>
             </form>
         </table>
     </fieldset>    
         <br>
     <div id="map">
     <?php 
         if ($antal >= 1) {
         while ($row = $stmt_row->fetch()) {
             $adresse = "'".$row['name'].", ".$row['address'].",".$row['postal'].",".$row['city']."',";   
      ?>
     <script type="text/javascript">    
   var delay = 100;
   var infowindow = new google.maps.InfoWindow();
   var latlng = new google.maps.LatLng(55.6760968, 12.5683371);
   var mapOptions = {
     zoom: 4,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   
   var geocoder = new google.maps.Geocoder(); 
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var bounds = new google.maps.LatLngBounds();
 
   function geocodeAddress(address, next) {
     geocoder.geocode({address:address}, function (results,status)
       { 
          if (status == google.maps.GeocoderStatus.OK) {
           var p = results[0].geometry.location;
           var lat=p.lat();
           var lng=p.lng();
           createMarker(address,lat,lng);
         }
         else {
            if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
             nextAddress--;
             delay++;
           } else {
                         }   
         }
         next();
       }
     );
   }
  function createMarker(add,lat,lng) {
    var contentString = add;
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
            }); 
 
   google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(contentString); 
      infowindow.open(map,marker);
    });
 
    bounds.extend(marker.position);
  }
     var locate = <?php echo json_encode( $adresse ) ?>;
         var locations = [locate];
   //var locations = [ <?php echo $adresse;?> ];
   //var locations = [ 'stradellasvej 22,2450,københavn SV','tartinisvej 2,2450,københavn SV' ]; Adresser indsættes via mysql
   var nextAddress = 0;
   function theNext() {
     if (nextAddress < locations.length) {
       setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
       nextAddress++;
     } else {
       map.fitBounds(bounds);
     }
   }
   theNext();  
 </script>
         <?php  } }  ?>
     </div>
     <div id="right">
         <?php ECHO "antal enheder: ".$antal; 
             if ($antal >= 1) {
                 while ($row_2 = $stmt->fetch()) {
         ?>
         <form action="action/falck_date.php?>" method="POST">
             <?php echo $row_2['name']." - ".$row_2['address']." - ".$row_2['postal']." ".$row_2['city']."<br>".$row_2['contact']." - ".$row_2['mobile']." Serial: ".$row_2['serial']; ?>
             <br>
             <input type="date" name="pl_date" value="<?php echo $row_2['pl_date']; ?>">
             <input type="hidden" name="id" value="<?php echo $row_2['id']; ?>">
             <input type="submit" value="Opdater dato">
         </form>    
             <?php } }  ?>
     </div>
     </div>
     </div>
     </body>
     </html>

Indlæg senest redigeret d. 22.01.2016 22:44 af Bruger #16819

Bruger #16075 @ 23.01.16 01:35

1.223

Scriptet er nok lidt "knoldet" men det virker. Dog kommer der kun max 11 markers frem på mit google map

får du ikke gentaget hele dit js for hver post du udtrækker ??
så udtrækker du 11 poster vil hele dit js står der 11 gange

det vil give problemer med functioner allerede er declareret

----------------------------

får du ikke fejl i dit php script ??

$stmt_row = $DBH->query("SELECT...");
$stmt_row->execute();
$antal = $stmt_row->RowCount();

.......

while ($row = $stmt_row->fetch()) {

slå din error_reporting til (PHP) når du udvikler
brug dine udviklings værktøjer i browseren.

Bruger #16819 @ 25.01.16 19:34

Error reporting er slået til, og jeg får ikke fejl på koden.
Kan ikke se hvad der skulle give fejl??
$DBH er er defineret i min config fil.

Hvis jeg ændre koden til:

PHP kode

 if ($antal >= 1) {
 while ($row = $stmt_row->fetch(PDO::FETCH_ASSOC)) {
 $adresse[] = array($row['name'], $row['address'], $row['postal'], $row['city'])    ;   
 } }
 ?>
 // skrives i js scriptet
 var locate = <?php echo json_encode( $adresse ) ?>;
         var locations = [locate];

Så får jeg ikke google map frem :-(

Bruger #16075 @ 25.01.16 19:48

1.223

$DBH er er defineret i min config fil.

$DBH er din database connection !!
så
$DBH->query("SELECT...");
er OK

men execute anvendes ifm PrepareStatement
http://php.net/manual/en/pdostatement.execute.php
http://stackoverflow.com/questions/4700623/pdos-query-vs-execute

så de viste fremhævede linjer skal melde fejl

Bruger #16819 @ 01.02.16 22:51

Fik løst mit problem sådan her:

PHP kode

 while ($row = $stmt_row->fetch()) {
 $adr[] = array("$row['name'].", ".$row['address'].",".$row['postal'].",".$row['city']);
 }

JScript kode

 var locate = <?php echo json_encode( $adr ) ?>;
     var locations = locate;

Indlæg senest redigeret d. 01.02.2016 22:56 af Bruger #16819

Bruger #17081 @ 02.02.16 10:22

1.258

nu tager du så den kode og ligger i en anden fil, som du henter via $.getJson("");

Google map

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler