谷歌地圖在外部js文件？

Question

我試圖讓谷歌地圖js代碼在外部運行...無濟於事 - 只是一個空白的div。

下面的代碼 - HTML：

<script type="text/javascript" src="js_plugins/jquery.googleMaps.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 

    <div id="googleMaps_content"> 
     <form id="googleMaps_form" action="" onSubmit="calcRoute(); return false;"> 
     <input id="googleMaps_originInput" type="text" value="" /> 
     <input id="googleMaps_directionsBtn" type="submit" value="Calcular itinerário" /> 
     </form> 
     <div id="googleMaps_map" style="width: 100%; height: 220px;"></div> 
     <div id="googleMaps_directions"></div> 
    </div> <!-- End of id="googleMaps_content" --> 

...和JS（js_plugins/jquery.googleMaps.js）：

$(document).ready(function(){ 

    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 

    function initialize(){ 

    var latlng = new google.maps.LatLng(40.080645,-8.320526); 

    directionsDisplay = new google.maps.DirectionsRenderer(); 

    var mapOptions = { 
     zoom: 14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     position: google.maps.ControlPosition.TOP_RIGHT 
     } 

    }; 

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

    directionsDisplay.setMap(map); 

    directionsDisplay.setPanel(document.getElementById("googleMaps_directions")); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: "NOVA PLAQUEMAR, Mundo de Pedra" 
    }); 

    } 

    function calcRoute(){ 

    var start = document.getElementById("googleMaps_originInput").value; 

    var end = "40.080645,-8.320526"; 

    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status){ 
     if (status == google.maps.DirectionsStatus.OK){ 
     directionsDisplay.setDirections(response); 
     } else { 
     if (status == 'ZERO_RESULTS'){ 
      alert('Não foi encontrado nenhum intinerário entre o ponto de partida a origem e o destino.'); // No route could be found between the origin and destination. 
     } else if (status == 'UNKNOWN_ERROR'){ 
      alert('O pedido de direcções não pode ser processado devido a um erro do servidor. O pedido pode ser bem sucedido se o fizer outra vez.'); // A directions request could not be processed due to a server error. The request may succeed if you try again. 
     } else if (status == 'REQUEST_DENIED'){ 
      alert('Esta página não tem permissão para usar o srviço de direcções.'); // This webpage is not allowed to use the directions service. 
     } else if (status == 'OVER_QUERY_LIMIT'){ 
      alert('A página ultrapassou o limite de pedidos num período de tempo demasiado curto.'); // The webpage has gone over the requests limit in too short a period of time. 
     } else if (status == 'NOT_FOUND'){ 
      alert('Não foi possível fazer o geocode de pelo menos um dos parâmetros: origem, destino ou itinerário.'); // At least one of the origin, destination, or waypoints could not be geocoded. 
     } else if (status == 'INVALID_REQUEST'){ 
      alert('O pedido de direcção providenciado é inválido.'); // The DirectionsRequest provided was invalid.   
     } elsez{ 
      alert("Houve um erro no seu pedido. Informação do pedido: \n\n"+status); // There was an unknown error in your request. Requeststatus: ... 
     } 
     } 
    }); 

    } 

    initialize(); 

}); 

這可能是一個noobish事情。 ：P

佩德羅

Answer 1

1. 你jquery.googlemaps應該是地圖後。

2. 正確elsez到別的去年條件：

變化

} elsez{ 
      alert("Houve um erro no seu pedido. Informação do pedido: \n\n"+status); // There was an unknown error in your request. Requeststatus: ... 
     } 

到

} else{ 
      alert("Houve um erro no seu pedido. Informação do pedido: \n\n"+status); // There was an unknown error in your request. Requeststatus: ... 
     } 

這將工作:)

Answer 2

您jquery.googlemaps應地圖後，否則其試圖存在才使用它。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript" src="js_plugins/jquery.googleMaps.js"></script> 

<div id="googleMaps_content"> 
    <form id="googleMaps_form" action="" onSubmit="calcRoute(); return false;"> 
    <input id="googleMaps_originInput" type="text" value="" /> 
    <input id="googleMaps_directionsBtn" type="submit" value="Calcular itinerário" /> 
    </form> 
    <div id="googleMaps_map" style="width: 100%; height: 220px;"></div> 
    <div id="googleMaps_directions"></div> 
</div> <!-- End of id="googleMaps_content" -->