×
If you expect answers you should describe your problem and give as much information's as possible. (SQL-Structure, Template Code, Joomla Version ...) Please read this before posting: joodb.feenders.de/support.html
Joodatabase fields into JS scrips do not works ?
- Stefanato
- Topic Author
- Offline
Less
More
- Posts: 28
- Thank you received: 0
8 years 5 months ago #4191
by Stefanato
Joodatabase fields into JS scrips do not works ? was created by Stefanato
Hi,
in the Single entry-Template, the following script works correctly if I use the numeric values of coordinates, but if I insert the joodatabase fiels values :
{joodb field|latitude} and {joodb field|longitude}, the maps is blank and it does not work :
Does the joodatabase tags conflict with javascript ?
Thanks in advance.
in the Single entry-Template, the following script works correctly if I use the numeric values of coordinates, but if I insert the joodatabase fiels values :
{joodb field|latitude} and {joodb field|longitude}, the maps is blank and it does not work :
Does the joodatabase tags conflict with javascript ?
Thanks in advance.
<div id="map" style="width:500px;height:500px;"></div>
<script>
// This example creates circles on the map, representing populations in North
// America.
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
//------------------ JOODATABASE FIELDS-------------
center: {lat: {joodb field|latitude}, lng: {joodb field|longitude}},
population: 2714856
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 45.4064823, lng: 11.821206,12},
mapTypeId: 'terrain'
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 1
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap">
</script>
Please Log in to join the conversation.
- Stefanato
- Topic Author
- Offline
Less
More
- Posts: 28
- Thank you received: 0
8 years 5 months ago #4194
by Stefanato
Replied by Stefanato on topic Joodatabase fields into JS scrips do not works ?
Not possible to solve this ?
Please Log in to join the conversation.
- Dirk
-
- Offline
Less
More
- Posts: 1222
- Thank you received: 226
8 years 5 months ago - 8 years 5 months ago #4199
by Dirk
Replied by Dirk on topic Joodatabase fields into JS scrips do not works ?
1: You can not use this type of Javascript in catalog view because the script would be inserted every time a entry is displayed in the root.
So the best solution is to override view html and insert javascript directly.
See here: Override Output
Instead of writing the lat and lng values into a script you should put the values into hidden fields or jQuery data values of your entry container
Example
Now you can use jQuery to get these values
The script cycles through all .item-class elements and parses the data into google map circle elements.
BTW: Instead of overriding jooDB template output you can also also put this into your main Template js.
So the best solution is to override view html and insert javascript directly.
See here: Override Output
Instead of writing the lat and lng values into a script you should put the values into hidden fields or jQuery data values of your entry container
Example
<div class="item" data-lng="{joodb field|longitude}" data-lat="{joodb field|latitude}" data-pop="{joodb field|population}">
<h3>{joodb field|city}</h3>
<p><b>{joodb field|population}</b></p>
<p>{joodb field|description}</p>
</div>
Now you can use jQuery to get these values
jQuery(".item").each(function(){
new google.maps.Circle({
map: map,
center: new GLatLng(jQuery(this).data("lat"),jQuery(this).data("lng")),
radius: Math.sqrt(jQuery(this).data("pop")) * 1
});
});
The script cycles through all .item-class elements and parses the data into google map circle elements.
BTW: Instead of overriding jooDB template output you can also also put this into your main Template js.
Last edit: 8 years 5 months ago by Dirk.
Please Log in to join the conversation.
- Stefanato
- Topic Author
- Offline
Less
More
- Posts: 28
- Thank you received: 0
8 years 5 months ago #4200
by Stefanato
Replied by Stefanato on topic Joodatabase fields into JS scrips do not works ?
Thanks for your kind reply, but I need to insert the map into the Single entry-Template (detail page; this in exmple : www.grimaldipadova.it/1039578-borgoricco ) not in Catalog View...
Thanks in advance.
Thanks in advance.
Please Log in to join the conversation.
- Dirk
-
- Offline
Less
More
- Posts: 1222
- Thank you received: 226
8 years 5 months ago - 8 years 5 months ago #4201
by Dirk
Are you kidding me?
Its the same code! But instead of a class name (item) can give your container a ID. For example "city"
Btw: why do you use Math.sqrt(jQuery("#city").data("pop")) * 1 ?
It make no sense to multiply a value with 1!
I guess you re using version 3 of the google maps api.
Use google.maps.LatLng instead of GLatLng
Replied by Dirk on topic Joodatabase fields into JS scrips do not works ?
Stefanato wrote: Thanks for your kind reply, but I need to insert the map into the Single entry-Template Thanks in advance.
Are you kidding me?
Its the same code! But instead of a class name (item) can give your container a ID. For example "city"
new google.maps.Circle({
map: map,
center: new google.maps.LatLng(jQuery("#city").data("lat"),jQuery("#city").data("lng")),
radius: Math.sqrt(jQuery("#city").data("pop"))
});
Btw: why do you use Math.sqrt(jQuery("#city").data("pop")) * 1 ?
It make no sense to multiply a value with 1!
I guess you re using version 3 of the google maps api.
Use google.maps.LatLng instead of GLatLng
Last edit: 8 years 5 months ago by Dirk.
Please Log in to join the conversation.
Moderators: Dirk, joest