谷歌地圖在html中的地址

我試圖谷歌加載地圖從地址得到地圖，我嘗試下面的代碼，但它不適合我，請找出我的錯誤。谷歌地圖在html中的地址

<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> 
    <script type="text/javascript"> 
     var geocoder; 
     var map; 
     function codeAddress() { 
      geocoder = new google.maps.Geocoder(); 
      var lat = ''; 
      var lng = ''; 
      var city_state_zip ='390002'; 
      var street_address = 'vadodara'; 
      var address = street_address + " " + city_state_zip; 
      geocoder.geocode({ 'address': address }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        lat = results[0].geometry.location.lat(); //getting the lat 
        lng = results[0].geometry.location.lng(); //getting the lng 
        map.setCenter(results[0].geometry.location); 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location 
        }); 
       } else { 
        alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 
      var latlng = new google.maps.LatLng(lat, lng); 
      var myOptions = { 
       zoom: 8, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     } 


     window.onload = function() { 
      codeAddress(); 
     } 
</script> 
</head> 
<body> 


    <div id="map_canvas" style="height: 350px; width: 500px; margin: 0.6em;"> 
    </div> 
</body> 
</html>

在那裏我添加位置手冊是'390002瓦都達拉'。

來源

2013-07-30 Archit

你已經發布的代碼工作正常（[現場版]（http://www.geocodezip.com/v3_SO_geocodeOnLoad.html）），爲什麼你認爲它不起作用？ – geocodezip

見Google Maps API here

你想要做什麼是發送就像一個AJAX請求如下：

http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=vadodara+390002

這將返回經緯度座標爲你在地圖上繪製

來源

2013-07-30 09:10:06

是的，我通過你的鏈接得到了回覆。但現在我該怎麼處理它。 – Archit

從響應中獲取緯度/經度值，並使用它們將標記放置在地圖上 –

沒問題。但你能給我一些參考，這對我有好處。 – Archit

這是一個完整的解決方案，下面是RTN_address.php函數。

這將返回一個在指定地址上有標記的地圖。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=8"/> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

     <title>Simple Map</title> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <style> 
      html, body, #map-canvas { 
       height: 300px; 
       width: 840px; 
       margin: 0px; 
       padding: 0px 
      } 
     </style> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

     <script>   
      function show_map_from_sql_address(id) { 
       var url_with_ID = "RTN_address.php?id=" + id.toString(); 
       $.ajax({ 
        type : "GET", 
        url : url_with_ID, 
        data : "pid=A5843", 
        dataType : "json", 
        success : function(data) {      
         var geocoder = new google.maps.Geocoder(); 
         var address = data.foo; 
         var map; 

         geocoder.geocode({ 
          'address' : address 
         }, function(results, status) { 

          if (status == google.maps.GeocoderStatus.OK) { 
           var latitude = results[0].geometry.location.lat(); 
           var longitude = results[0].geometry.location.lng(); 

           var latlng = new google.maps.LatLng(latitude, longitude); 
           var mapOptions = { 
            zoom : 10, 
            center : latlng, 
            mapTypeId : google.maps.MapTypeId.ROADMAP 
           }; 
           map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

           map.setCenter(results[0].geometry.location); 
           var marker = new google.maps.Marker({ 
            map : map, 
            position : results[0].geometry.location 
           }); 
          } 
         }); 
        } 
       }); 
      }; 
     </script> 
    </head> 
    <body onload="show_map_from_sql_address(7)"> 
     <div id="map-canvas"></div> 
    </body> 
</html>

RTN_address.php

<?php 
$id = $_GET['id']; 
$query1 = "SELECT * FROM table_of_homes WHERE id ='" . $id . "';"; 
$result1 = mysql_query($query1); 
$address = "Not_set"; 

if (!$result1) {  
    die('Invalid query: ' . mysql_error()); 
} else { 
    $fields = array(); 
    while ($row1 = mysql_fetch_array($result1, MYSQL_ASSOC)) {   
     $Street_Address = $row1['Street_Address']; 
     $City_Town = $row1['City_Town']; 
       $State = $row1['State']`enter code here`; 
     $Zipcode = $row1['Zipcode'];     
     $address = $Street_Address ." ". $City_Town ." ". $State .", ". $Zipcode;    
    } 
} 
//NOTE: you can test this by entering an address here. 
//$address = "111 Oak Hill Avenue Kingston PA, 18760"; 
echo json_encode(array('foo' => $address)); 
?>

來源

2013-11-29 00:40:25 Gil

谷歌地圖在html中的地址

回答

相關問題