Javascript avec Smarty & Google Maps API

Étant le java newbie absolu que je suis, je me suis torturé pour arriver là où je suis. Mais, je l'ai fait. Et, je ne pouvais pas être plus heureux! Mais ... j'ai un dernier et dernier numéro. J'utilise Smarty. Smarty écrit le javascript dynamique pour que je charge les marqueurs de ma carte.Javascript avec Smarty & Google Maps API

Je dois inclure mes fichiers .tpl d'en-tête et de pied de page. Mon header.tpl a un <head> et <body> mais le code de ma carte dépend du <head> et <body> étant où il est.

La partie du code est le problème.

Je ne peux absolument pas comprendre comment exécuter mon javascript sans ce code "onload". Quelqu'un peut-il me donner un pourboire?

Tout ce dont j'ai vraiment besoin, c'est de savoir comment lancer mon code javascript sans que cela dépende de la balise <body>.

Voici mon code et merci beaucoup d'avance!

{* 

{include file="header.tpl"} 
<h3 class="titlehdr">Book Buyers - Accounts Map</h3> 
{if $userlevel == 5} 
    <p>Admin User</p> 
{/if} 
Hello, {$name}! 
<br><br> 

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 50% } 
    body { height: 50%; margin: 0px; padding: 0px } 
    #map_canvas { height: 50% } 
</style> 
*} 



<br><br> 

<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 
{foreach from=$getMap key=k item=v} 
    var buyer{$k} = new google.maps.LatLng 
    {foreach from=$v key=k item=latlng} 
     {if $k == "lat"} 
      ({$latlng} , 
     {else} 
      {$latlng}); 
     {/if} 
    {/foreach} 
{/foreach} 

var marker; 
var map; 

function initialize() { 
    var mapOptions = { 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: warehouse 
    }; 

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

    marker = new google.maps.Marker({ 
    map:map, 
    draggable:false, 
    animation: google.maps.Animation.DROP, 
    position: buyer5 
    }); 
{foreach from=$getMap key=k item=v} 
    marker{$k} = new google.maps.Marker({ 
    map:map, 
    draggable:false, 
    animation: google.maps.Animation.DROP, 
    position: buyer{$k} 
    }); 
{/foreach} 

} 

</script> 

<body onload="initialize()"> 
    <div id="map_canvas" style="width:70%; height:70%"></div> 


{include file="footer.tpl"}

Source

2011-03-19 Charlie

Vous pouvez le faire avec JQuery, tout ce que vous devez faire est d'appeler ce code dans <script></script> balises. Voici comment appeler votre code lorsque le document est chargé dans le navigateur et qu'il est prêt.

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Your code supposed to be called, goes here. 

    }); 
</script>

Alors que <script> tag fonctionne même si écrit dans une partie du document, si vous utilisez « grands » navigateurs, vous savez ce que je veux dire ;-). Mais ce n'est pas une bonne pratique d'avoir ces balises à un endroit aléatoire sur la page, car cela peut être un problème de compatibilité. Alors gardez le code dans les balises <head></head> de votre page.

Et pour JQuery, vous pouvez télécharger la dernière version stable depuis son site Web ou simplement ajouter la ligne suivante dans votre balise <head>.

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

Source

2011-03-19 06:33:35 Kushal

Javascript avec Smarty & Google Maps API

Répondre

Questions connexes