将地方搜索框添加到谷歌地图api3

时间:2014-02-15 14:32:28

标签: javascript php google-maps

您好我正在尝试将地方搜索框添加到我的Google地图中我在Google Places search box上搜索时发现了这一点,但我不明白如何使用我的地图实现它,我的地图适用于管理员使用PHP和Mysql将地图保存为我的数据库中的记录以在客户端查看它的部分,请参阅我使用的代码

<?php if(isset($_GET['propid'])){$propid=$_GET['propid'];} ?>
<!DOCTYPE html >

    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Property Map</title>
<link rel="stylesheet" href="../../../../css/960.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../../../../css/template.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../../../../css/colour.css" type="text/css" media="screen" charset="utf-8" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var marker;
    var infowindow;

    function initialize() {
      var latlng = new google.maps.LatLng(30.0599153,31.2620199,13);
      var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map-canvas"), options);
      var html = "<table>" +
                 "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                 "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
                 "<tr><td>Type:</td> <td><select id='type'>" +
                 "<option value='bar' SELECTED>bar</option>" +
                 "<option value='restaurant'>restaurant</option>" +
                 "</select> </td></tr>" +
                 "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
    infowindow = new google.maps.InfoWindow({
     content: html
    });

    google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    map.setCenter(event.latLng);
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
});
    }

    function saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getPosition();

      var url = "manageMap.php?propid=<?php echo $propid; ?>&name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          infowindow.close();
          document.getElementById("message").innerHTML = "Location added.";
        }
      });
    }
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    </script>
    </head>

    <body style="margin:0px; padding:0px;" onload="initialize()">
    <h1 id="head" class="header_height"><img src="../../../../img/logo.jpg" width="284" height="73" alt="" class="logo"/></h1>
<?php
    if(isset($_GET['cid'])){$cid=$_GET['cid'];}
    if(!isset($_GET['cid'])){$cid=9;}
?>
<ul id="navigation">
  <li <?php if($cid==1){echo"class='active'";} ?>><a href="index.php?cid=1">Manage Pages</a></li>
  <li <?php if($cid==9){echo"class='active'";} ?>><a href="index.php?cid=9">Manage Projects</a></li>
  <li <?php if($cid==3){echo"class='active'";} ?>><a href="index.php?cid=3">Manage Previous Work</a></li>
  <li <?php if($cid==5){echo"class='active'";} ?>><a href="index.php?cid=5">Manage News</a></li>
  <li <?php if($cid==8){echo"class='active'";} ?>><a href="index.php?cid=8">Users</a></li>
</ul>

<div id="welcome">
<a style="color:#FFF; font-weight:bold; font-size:14px;" href="session_manager/logout.php">Sign out</a></div>

    <div style="width:100%; height:autox; margin:0 auto; text-align:right; direction:rtl;">
<h1 style="margin-right:10px;">الخطوة الثالثة تحديد المشروع علي الخريطة</h1>
<p style="color:#000066; font-size:18px; font-family:Arial, Helvetica, sans-serif; margin:20px;">هذة هي الخطوة الثالثة لإضافة الخريطة للمشروع حدد المكان الذي يقع فية العقار و انقر بالفارة هناك و أكمل البيانات المطلوبة و أضغط علي حفظ</p>
<div id="map-canvas" style="width: 100%; height: 600px"></div>
<div id="message"></div>
</div>
</body>
</html>

如果你愿意,可以帮我解决我的代码问题。

0 个答案:

没有答案