0

I am making a customized google map in my cs50 final project which is served by a flask route and it just doesnt work. Surprisingly, I see no errors in the console so, my js seems to be fine but otherwise there may be something I'm loosing on so, plse help!

My code for the html,js is here as below :

map.html

{% extends "layout.html" %}
{% block title %}
    MAP
{% endblock %}

{% block main %}

<div id = "map"></div>

{% endblock %}

{% block head %}
{{ super() }}
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="{{ url_for('static', filename='scripts4.js') }}"></script>
<script src="https://maps.googleapis.com/maps/api/js? 
key=my_API_KEY&libraries=places&callback=initMap" async defer></script>
<style type = "text/css">
/* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
</style>
{% endblock %}

scripts4.js
In my js file I'm looking for some ngo's near a place, the name,long-lat of which I have already hard coded.

  var map;
  var infowindow;

  function initMap() {
    var KarolBagh = {lat: 28.654100, lng: 77.194205};

    map = new google.maps.Map(document.getElementById('map'), {
      center: KarolBagh,
      zoom: 15
    });

    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch({
      location: KarolBagh,
      radius: 4999,
      keyword: 'ngo',
      type: ['establishment']
    }, callback);
  }

  function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

Here in scripts4.js I've not disclosed my api key,though I do write it there in my map.html in my IDE. Surprisingly, this map is working on my local computer where I've not used jinja and have wrapped up all of the html,css,js in on one file map.html and it works fine. But here with in he IDE it doesnt work.Plse help!

4
  • Since it works without jinja, perhaps the problem is layout.html. Suggest you "view source" of the local page that works and compare to "view source" of the IDE page that does not. It will likely reveal issues that will get you on track. Sep 2 '18 at 3:05
  • @DinoCoderSaurus can u plse tell how to preview an html file in cs50 ide, I dont see that option in the ide anymore and I have checked with the preferences as well.
    – sk.76
    Sep 2 '18 at 13:14
  • I don't know how to "preview" an html file in the ide. Are you thinking of the option that allows you to preview a URL by clicking on a web address in the terminal? In any case, in the browser window/tab of your app, right-click and choose "View page source" from the context menu. It will open a new tab/window with the underlying html. Sep 2 '18 at 14:04
  • I dont mean the other case the view page source, I mean the preview option for any html file. I just cant find it.
    – sk.76
    Sep 2 '18 at 14:31

You must log in to answer this question.

Browse other questions tagged .