2012-01-05 2 views
-1

Я протестировал этот код на тестовой странице, но теперь хочу реализовать его на странице, вызываемой оверлеем (Lightview). Карта не отображается, и я не знаю почему. Оверлейные пространства - это размер карты, но ничего не отображается. Вот код:Google Map не удалось загрузить

<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
<?php 
require_once('../maps/google.php'); 

if(isset($_POST['submit'])) 
{ 
$zipcode = $_REQUEST['zipcode']; 
$lookupPerformed = false; 

if (strlen($zipcode) > 0) { 
    $geocoder = new Geocoder('mykey'); 


    try { 
     $placemarks = $geocoder->lookup($zipcode); 
    } 
    catch (Exception $ex) { 
     echo $ex->getMessage(); 
     exit; 
    } 

    $lookupPerformed = true; 
} 
foreach ($placemarks as $placemark) { 

$lat = $placemark->getPoint()->getLatitude(); 
$long = $placemark->getPoint()->getLongitude(); 
} 

?> 
<script type="text/javascript"> 
//<![CDATA[ 

var customIcons = { 
    A Company: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    }, 
}; 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?>), 
    zoom: 10, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("../testxml.php?zipcode=<?php echo $zipcode;?>", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b> <br/>" + address; 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

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, request.status); 
    } 
    }; 

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

function doNothing() {} 

//]]> 

</script> 
///// other PHP code 

</head> 

     <form method="POST" id="ajaxForm" onsubmit="submitAjaxFormDemonstration()"> 
     <input type="text" size="10" maxlength="10" name="zipcode" tabindex="1" value=" <?php echo $_POST['zipcode'];?>" /> 
     <input type="submit" id="submit" value="Search" name="submit" tabindex="2" /> 
     </form> 
<body onload="load()"> 
<div id="map" style="width: 500px; height: 300px"></div> 
</body> 

</html> 

ответ

0

У вас есть куча вещей происходит не так здесь, и нечто, которое я не могу даже видеть, чтобы сказать вам, являются ли они правильно или неправильно ...

На дне из отправленного кода, у вас есть:

</head> 

     <form method="POST" id="ajaxForm" onsubmit="submitAjaxFormDemonstration()"> 
     <input type="text" size="10" maxlength="10" name="zipcode" tabindex="1" value=" <?php echo $_POST['zipcode'];?>" /> 
     <input type="submit" id="submit" value="Search" name="submit" tabindex="2" /> 
     </form> 
<body onload="load()"> 
<div id="map" style="width: 500px; height: 300px"></div> 
</body> 

</html> 

у вас есть <form>...</form> элемент объявлен вне из <body>...</body> тегов - это не действительный HTML.

</head> 

<body onload="load()"> 

<form method="POST" id="ajaxForm" onsubmit="submitAjaxFormDemonstration()"> 
    <input type="text" size="10" maxlength="10" name="zipcode" tabindex="1" value="<?php echo $_POST['zipcode'];?>" /> 
    <input type="submit" id="submit" value="Search" name="submit" tabindex="2" /> 
</form> 

<div id="map" style="width: 500px; height: 300px"></div> 

</body> 
</html> 

затруднительных что ... Но вы, вероятно, следует использовать что-то вроде W3C Validator, чтобы проверить ваш HTML код. Плохой HTML почти всегда ломает Javascript (например, Карты Google).

Далее вы вызываете скрипт PHP, который вы вообще не объясняете require_once('../maps/google.php');. Что это? Где ты взял это? Проконсультировались ли вы с учебными пособиями или документацией?

Вы только показываете нам часть проблемы здесь. Вам нужно вернуться на площадь 1 и проверить каждый шаг, когда вы двигаетесь вперед. Прыжки до конца (что, с точки зрения вашего кода, является тем, что вы пытались сделать) означает, что один из ста шагов между Square 1 и там, возможно, сломался, и теперь вам нужно вернуться и искать его ,

+0

Спасибо за ответ, но это ничего не исправить. ../maps/google.php - это геокодер. Я так долго и долго работаю. Я понимаю, что форма была вне тегов тела, но не имеет никакого значения для отображения карты. Ответит ли кто-нибудь с картами Google или прототипом? – savagenoob

+0

У меня есть опыт работы с Картами Google, спасибо. Вы можете отображать простую/стандартную карту, не используя Геокодер? Если это так, то Geocoder (где бы вы ни находились) - проблема. Если вы не видите карту в любом случае, это проблема с вашим HTML. Вы не можете просто сбросить свой код здесь, только показывая его часть, и ожидайте, что люди найдут эту проблему. –

Смежные вопросы