Javascript with Smarty & Google Maps API
Being the absolute java newbie that I am, I've tortured myself getting to where I am. But, I did it.开发者_如何学Go And, I couldn't be more happy! But... I have one last and final issue.
I'm using Smarty. Smarty writes the dynamic javascript for me to load my map's markers.
I need to include my header and footer .tpl files. My header.tpl has a <head> and <body> but my maps code depends on the <head> and <body> being where it is.
The part of the code is the problem.
I absolutely can not figure out how to execute my javascript without this "onload" code. Can someone give me a tip?
All I really need is to know how to launch my javascript code without it being dependant on the <body> tag.
Here's my code and thank you SO MUCH in advance!
{*
{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"}
You can do that with JQuery, all you need to do is call that code in <script></script> tags. Here's how you can call your code when document is loaded into the browser and is ready.
<script type="text/javascript">
$(document).ready(function(){
//Your code supposed to be called, goes here.
});
</script>
While <script> tag works even if wrote in any part of the document, if you're using "great" browsers, you know what I mean ;-). But its not a good practice to have those tags at any random place on the page, as this can be a compatibility issues. So keep the code within <head></head> tags of your page.
And for JQuery, you can either download latest stable release from its website, or simply add the following line in your <head> tag.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
加载中,请稍侯......
精彩评论