For obvious reasons, I'll be referring to my API KEY by [GOOGLE_API_KEY]. I have the following view :
def search_places(request):
GOOGLE_API_KEY = os.getenv('google_api_key')
search_keywords = request.POST.get('keywords')
search_type = request.POST.get('type')
top = request.POST.get('top')
is_open = request.POST.get('open')
w_duration = 1 - (int(request.POST.get('w-duration')) / 100)
rating_filter = float(request.POST.get('btnradio-rtg'))
price_filter = int(request.POST.get('btnradio-price'))
# Converting is_open from string to bool
if is_open:
is_open = True
else:
is_open = False
df_users = get_all_users_df()
dict_users = format_df_users_for_map(df_users)
barycenter = compute_barycenter(df_users)
return render(request, "index.html", {'google_api_key': GOOGLE_API_KEY,
'dict_users': dict_users,
'barycenter': barycenter
}
)
Which return in dict_users and in barycenter the following :
dict_users = [{'lat': 48.8501531, 'lng': 2.3897723, 'name': 'John'}, {'lat': 48.8490926, 'lng': 2.458714, 'name': 'Jack'}, {'lat': 48.8472106, 'lng': 2.3792469, 'name': 'James'}, {'lat': 48.8490926, 'lng': 2.458714, 'name': 'Jose'}]
barycenter = (48.848887225, 2.4216118)
In my 'index.html' template, I have :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="{% static 'css/favicon.ico' %}" type="image/x-icon">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maps.googleapis.com/maps/api/js?key=[GOOGLE_API_KEY]&libraries=places"
defer></script>
</head>
With a script block :
<html lang="en">
<body style="background-color: #f4f6f9;">
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "[GOOGLE_API_KEY]", v: "beta"});
// Initialize and add the map
let map;
async function initMap() {
// The location of Uluru
const barycenter = { lat: {{barycenter[0]}}, lng: {{barycenter[1]}} };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerView } = await google.maps.importLibrary("marker");
// The map, centered at barycenter
map = new Map(document.getElementById("map"), {
zoom: 4,
center: barycenter,
mapId: "DEMO_MAP_ID",
});
// Array of marker positions
const markerPositions = {{dict_users}};
// Add markers to the map
markerPositions.forEach((position, index) => {
new AdvancedMarkerView({
map: map,
position: position,
title: `Marker ${index}`,
});
});
}
initMap();
</script>
</body>
</html>
I have tried referring to the context variables using {{ VARIABLE }} but a TemplateSyntaxError is returned on the localhost. Do you know how to use context variables in Javascript ?
