How to use Django views variables in Google Maps API Javascript on HTML template?

Question

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/bootstrap@5.3.1/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 ?

It should be in a string like this "{{variable}}" – Ahtisham Aug 15 '23 at 17:28 — Ahtisham, Aug 15 '23 at 17:28

Ahtisham · Answer 1 · 2023-08-15T18:26:48.953

0

You need to use variable as string which you are not doing currently like this:

const barycenter = {lat: "{{ barycenter|first }}", lng: "{{ barycenter|last }}"};

Also in template list index syntax is different as I have done above docs

To get object in javascript use safe template tag like this:

const markerPositions = "{{ dict_users|safe }}";

edited Aug 15 '23 at 18:26

answered Aug 15 '23 at 17:31

Ahtisham

9,170
4
43
57

I also found elsewhere that you can use json.dumps() in the context and retrieve using JSON.parse in the Javascript. https://stackoverflow.com/questions/43305020/how-to-use-the-context-variables-passed-from-django-in-javascript – nidaln Aug 15 '23 at 17:54
updated my answer we can use safe template tag. – Ahtisham Aug 15 '23 at 18:16

How to use Django views variables in Google Maps API Javascript on HTML template?

1 Answers1