2017-03-03 4 views
-1

現在、データベース(MySql)から郵便番号を取得し、画面に表示するgoogle mapsモジュールに取り組んでいます。現在、HTMLフォームの提出ボタンを使用していますが、削除するのが理想的です。誰かが見て、これを実現するために必要なステップを私に見せてくれますか?あなたはので、これは多くの国のために働く郵便番号だけでなく、国の名前を取らなければならないGoogle Maps API - 地図上に郵便番号を表示したい - JS/PHP

おかげ

<?php 

session_start(); 
if (!isset($_SESSION['username'])){ 
    echo "You aren't logged in, please do so below<br>"; 
    include('loginform.php'); 
    exit(); 
} 

?> 
<!doctype html><head> 
    <title>front</title> 
    <style> 
p { 
    color: white; 
} 
     #map 
     { 
      height:400px; 
      width:400px; 
      display:block; 
     } 
.element { 
    position: relative; 
    float: left; 
    z-index: 0; 
    width: 100%; 
    height: 51px; 
    background-color: rgba(0, 0, 0, 0.12); 
} 
.text { 
    color: white; 
} 
.image { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    width: 125px; 
    height: auto; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.button { 
color: white; 
background-color: rgba(0, 0, 0, 0.3); 
background-blend-mode: screen; 
padding: 10px; 
border-radius: 5px; 
text-align: center; 
     } 
     .content { 
      position: relative; 
      top: 25px; 
      width: 320px; 
      margin: auto; 
      font-family: Arial, Helvetica, sans-serif; 
     } 
</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdfR_iH3dKB3ghSFhyDvfTeoA53c6PPGg"></script> 
     <script type="text/javascript"> 

      function getPosition(callback) { 
      var geocoder = new google.maps.Geocoder(); 
      var postcode = document.getElementById("postcode").value; 

      geocoder.geocode({'address': postcode}, function(results, status) 
      { 
       if (status == google.maps.GeocoderStatus.OK) 
       { 
       callback({ 
        latt: results[0].geometry.location.lat(), 
        long: results[0].geometry.location.lng() 
       }); 
       } 
      }); 
      } 

      function setup_map(latitude, longitude) { 
      var _position = { lat: latitude, lng: longitude}; 

      var mapOptions = { 
       zoom: 16, 
       center: _position 
      } 

      var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

      var marker = new google.maps.Marker({ 
       position: mapOptions.center, 
       map: map 
      }); 
      } 

      window.onload = function() { 
      setup_map(51.5073509, -0.12775829999998223); 

      document.getElementById("form").onsubmit = function() { 
       getPosition(function(position){ 

       var text = document.getElementById("text") 
       text.innerHTML = "Marker position: { Longitude: "+position.long+ ", Latitude:"+position.latt+" }"; 

       setup_map(position.latt, position.long); 
       }); 
      } 
      } 
     </script> 
    </head> 

<?php 
include('header.html'); 
    $username = $_SESSION['username']; 
    $con = *** 
    if (!isset($con)) { 
     echo "Connection to Aurora System failed."; 
    } 

if(isset($_POST['shop_id'])){ 
    $shopid = $_POST['shop_id']; 
} else { 
    die('Shop not selected'); 
} 

?> 
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <title>shopoptions</title> 

<body> 
    <div class="content" align="center"> 
    <p class="text text-3"><?php $query2 = "SELECT shopname, contactname, streetaddress, streetaddress2, city, county, email, phonenumber, postcode FROM shops WHERE shop_id = '$shopid'"; 
    $result2 = mysqli_query($con, $query2); 
    while ($row2 = mysqli_fetch_array($result2)) { 
     echo $row2['shopname'] . '<br>' . $row2['contactname'] . '<br>' . $row2['streetaddress'] . '<br>' . $row2['streetaddress2'] . '<br>' . $row2['city'] . '<br>' . $row2['county'] . '<br>' . $row2['postcode'] . '<br><br>' . $row2['email'] . '<br>' . $row2['phonenumber'] . '<br><br>'; 
     $postcode = $row2['postcode']; 
    } ?></p><br> 
      <form action="javascript:void(0)" id="form"> 
     <input type="hidden" id="postcode" value="<?php echo $postcode; ?>"> 
     <input type="submit" value="Show me"/> 
     </form> 
     <div id="map"></div> 
     <div id="text"></div> 


    <br> 

    <form action="orderselect.php" method="POST"> 
    <input type="hidden" value="<?php echo $shopid; ?>" name="shop_id"> 
    <button class="button">View Orders</button> 
    </form><br> 
    <form action="FUCKORDER.PHP" method="post"> 
    <input type="hidden" value="<?php echo $shopid; ?>" name="shop_id"> 
    <button class="button">Create Report</button> 
    </form><br> 
    <form action="competitors.php" method="GET"> 
    <input type="hidden" value="<?php echo $shopid; ?>" name="shop_id"> 
    <button class="button">POS/Competition</button> 
    </form><br> 

    <a href="front.php"><button class="button">Go Back</button></a> 
    </div> 
</body> 
</html> 
+2

を変更されましたか..? – PhpDude

+1

Doh!もし私がそのことを言ったら助けになるだろう。私は、mysqlデータベースから投稿コードを取得して、マップ上にある場所を自動的に表示するために使用できるようにしたい –

答えて

0

。郵便番号のみを使用する場合は、指定した国での検索の制限が必要です。

Fiddleデモ

アイデアはその後、コールのJavaScript機能window.onload = codeAddress()

MySQLデータベースからのポストコード+国であるデータを取得し、隠しフィールドの値に

<input id="pin_country" type="hidden" value="560038, india">

それを置くことです

これは地図上の場所を表示します

Soコード

var geocoder; 
var map; 
var marker; 
codeAddress = function() { 
    geocoder = new google.maps.Geocoder(); 

    var address = document.getElementById('pin_country').value; 
    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map = new google.maps.Map(document.getElementById('mapCanvas'), { 
     zoom: 16, 
     streetViewControl: false, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
      mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP] 
     }, 
     center: results[0].geometry.location, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     map.setCenter(results[0].geometry.location); 
     marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location, 
     draggable: false, 
     title: 'My Title' 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

window.onload=codeAddress() 

あなたはそれが上記のコードのみポストコードを使用したい場合はまあ....あなたの代わりに何をすべきかをしたいですか

<input id="pin_country" type="hidden" value="560038">

geocoder.geocode({ 
    'address': address, 
    componentRestrictions: { /*this adds restict to specific country*/ 
      country: 'IN', 
      } 
    }, function(results, status) {...}) 
関連する問題