如何在我的網站中嵌入谷歌地圖。

-4

我有一個谷歌地圖嵌入我的網站，我已經按照谷歌網站的所有步驟，但我沒有讓地圖出現在瀏覽器中。誰能告訴我，我是錯在下面如何在我的網站中嵌入谷歌地圖。

map.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Map Page</title> 
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' /> 
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' /> 
<link href="default.css" rel="stylesheet" type="text/css" media="all" /> 
<!--[if IE 6]> 
<link href="default_ie6.css" rel="stylesheet" type="text/css" /> 
<![endif]--> 

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</script> 

<style type="text/css"> 
      #map { 
    width: 850px; 
    height: 500px; 
    border: 3px solid #FF0000; 
    padding: 0px; 
    position: absolute; 
    top: 250px; 
    left: 253px; 
} 
</style> 
<script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLM6vAtHLu_SgqOtrAZvLSBoQUfILmPLI&sensor=false"> 
    </script> 

<script type="text/javascript"> 
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", 
         new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
         new google.maps.Point(16, 32)); 
      var center = null; 
      var map = null; 
      var currentPopup; 
      var bounds = new google.maps.LatLngBounds(); 
      function addMarker(lat, lng, info) { 
       var pt = new google.maps.LatLng(lat, lng); 
       bounds.extend(pt); 
       var marker = new google.maps.Marker({ 
        position: pt, 
        icon: icon, 
        map: map 
       }); 
       var popup = new google.maps.InfoWindow({ 
        content: info, 
        maxWidth: 300 
       }); 
       google.maps.event.addListener(marker, "click", function() { 
        if (currentPopup != null) { 
         currentPopup.close(); 
         currentPopup = null; 
        } 
        popup.open(map, marker); 
        currentPopup = popup; 
       }); 
       google.maps.event.addListener(popup, "closeclick", function() { 
        map.panTo(center); 
        currentPopup = null; 
       }); 
      }   
      function initMap() { 
       map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(0, 0), 
        zoom: 14, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
        }, 
        navigationControl: true, 
        navigationControlOptions: { 
         style: google.maps.NavigationControlStyle.ZOOM_PAN 
        } 
       }); 


<?php 

$query = mysql_query("SELECT lattitude, user_name,village_name, longitude FROM user u 
         INNER JOIN village v 
         ON u.village = v.id")or die(mysql_error()); 

while($row = mysql_fetch_array($query)) 
{ 
    $name = $row['user_name']; 
    $lat = $row['lattitude']; 
    $lon = $row['longitude']; 
    //$desc = $row['desc']; 
//'<b>$name</b> 
var_dump($query); 

    echo("addMarker($lat, $lon <br />');\n"); 

} 
echo "this is not working"; 
?> 
center = bounds.getCenter(); 
    map.fitBounds(bounds); 

    } 
</script> 
</head> 
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> 
<?php require_once('header.php'); ?> 
<div id="wrapper"> 
    <div id="page-wrapper"> 
     <div id="page"> 
      <div id="wide-content"> 
       <div id="map"></div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <?php require_once('footer.php'); ?> 
</body> 
</html>

來源

2013-05-13 user2372265

如果我拿出你的PHP的一部分，映射..正在添加即，從你的SELECT語句。 – 2013-05-13 11:23:00

但我嘗試了querry，它返回正確的結果 – user2372265 2013-05-13 11:45:51

取出var_dump和回聲「這不工作」;我認爲它應該工作 – 2013-05-13 11:47:51

你必須要小心你寫的東西在你的腳本調試信息給出的代碼。 JS代碼中間的打印輸出可能是破壞你的代碼的東西。

檢查JS控制檯（如鉻或螢火蟲），你會發現那裏的錯誤。

嘗試這樣的：

while($row = mysql_fetch_array($query)) 
{ 
    $name = $row['user_name']; 
    $lat = $row['lattitude']; 
    $lon = $row['longitude']; 
    echo("addMarker('$lat', '$lon');\n"); 
} 
?>

來源

2013-05-13 11:28:43

@ Alex使用它顯示的螢火蟲：**

resource(5,mysql result)

addMarker（33.659049,3.504174
'）;

resource(5,mysql result)

addMarker（33.859246,35.511971
'）;

resource(5,mysql result)

addMarker（33.89996，35.60476
'）; 這不工作center = bounds.getCenter（）; map.fitBounds（bounds）; ** – user2372265 2013-05-13 11:41:00

是的，你所看到的是你所做的var_dump的結果。這是產生的東西，JavaScript無法理解。你可以嘗試使用我發送的代碼嗎？ – 2013-05-13 11:48:37

如何在我的網站中嵌入谷歌地圖。

回答

相關問題