This one is fine but in Smarty 3 you don’t have to use all those {literal} tags - they can make your code difficult to read. If you put a space or newline after { then you don’t need {literal}:
<script>
(function(h, o, t, j, a, r)
{
h.hj = h.hj||function() { (h.hj.q = h.hj.q||[]).push(arguments) };
h._hjSettings = { hjid: {$myvars.js_hotjar1}, hjsv: {$myvars.js_hotjar2} };
a = o.getElementsByTagName('head')[0];
r = o.createElement('script'); r.async = 1;
r.src = t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
}
)(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');
</script>
Pass the php values from your html template, the same one where you include the external js file:
<script src="googleMapDemo.js"></script>
<script>
GoogleMapDemo.myLat = {$myLat}; // 40.781840
GoogleMapDemo.myLng = {$myLng}; // -73.972967
</script>
googleMapDemo.js now doesn’t need any php variables (see marker1
):
var GoogleMapDemo = {
init: function() {
function initialize() {
var map;
google.maps.event.addDomListener(window, "load", function ()
{
var map = new google.maps.Map(document.getElementById("map_div"),
{
center: new google.maps.LatLng(40.783221, -73.966143),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
var infoWindow = new google.maps.InfoWindow();
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
if (html) {
google.maps.event.addListener(marker, "click", function ()
{
infoWindow.setContent(html);
infoWindow.open(options.map, this);
}
);
}
return marker;
}
var marker0 = createMarker(
{
position: new google.maps.LatLng(40.774462, -73.967784),
map: map,
icon: "markers/marker-green.png"
}, "<h1>Marker 0</h1><p>This is the home marker.</p>"
);
var marker1 = createMarker(
{
position: new google.maps.LatLng(GoogleMapDemo.myLat, GoogleMapDemo.myLng),
map: map
}, "<h1>Marker 1</h1><p>This is marker 1</p>"
);
var marker2 = createMarker(
{
position: new google.maps.LatLng(40.775526, -73.971721),
map: map
}, "<h1>Marker 2</h1><p>This is marker 2</p>"
);
}
);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
}
In this example I used the GoogleMapDemo object created earlier in the external js file and I inserted the variables to this object. But if you don’t have an object like this you can do the same with global variables, or better yet create a special object for passed variables from php just for readability:
<script>
var passedVars = {
centerLat: 40.783221, // you can put {$centerLat} instead of the number
centerLng: -73.966143,
lat0: 40.774462,
lng0: -73.967784,
lat1: 40.781840,
lng1: -73.972967,
lat2: 40.775526,
lng2: -73.971721
};
</script>
<script src="googleMapDemo.js"></script>
And in googleMapDemo.js replace your numeric values with references to this object like passedVars.centerLat
, passedVars.lat1
, passedVars.lng2
, etc.
This way you leave your external js file a simple static file without any php or template variables - this is good for performance since loading the js file will not consume (almost) any CPU cycles.