5

labelClass: "labels", Defined in CSS as 'label', not 'labels'. labelContent: markers.place_name, The passed variable to this function is place, not markers. Did you define the parameters variable for $.getJSON("articles.php", parameters) ? We should pass there geo: place.postal_code json. Define the articles before you call the $.getJSON query, like: ...


4

There is an example of MarkerWithLabel here that should show you how to do that. It's the labelContent property. Transcript of an example from that link: var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, ...


4

Had the same trouble. Fix it with 'var' before 'marker = new...'. Else you overwrite the same variable each time.


2

As ChrisG said in the comments, you don't need to add two different click listeners for each marker. I'm comparing your code to mine, and my click listener just uses showInfo(marker, content) -- admittedly, I need to define var content outside of the click lister's anonymous function scope, earlier in the addMarker() function, in order for this to be useful. ...


2

You can assign anchor value for label so it does not overlap with the icon, like this var marker = new MarkerWithLabel({ position: latLng, map: map, labelContent: place["place_name"], icon : 'img/icon31.png', labelAnchor: new google.maps.Point(20, 0), labelClass: "labels", // the CSS class for the label labelStyle: {opacity: 0.75}...


2

Man... you'll be so pissed off with this... You should declare a NEW marker variable every time you call addMarker, but you don't do this here: marker = new google.maps.Marker({...... When you do marker = ..., you're just overwriting one global marker over and over again. This should be: var marker = new google.maps.Marker({...... If this solves your ...


2

You are always setting myLatLang here var myLatlng = new google.maps.LatLng(42.3770, -71.1256); // Cambridge, Massachussets, so all the markers will go "there". The argument place is the result of the SELECT query in the update route in application.py, so you probably want the lat/lang from the place dictionary. Instead of doing this: var myLatlng = new ...


2

You told the program to "get" info from "articles" here $.getJSON(Flask.url_for("articles")) but you didn't tell it what to GET. Assuming your articles function returns data as per the examples (eg https://ide50-username.cs50.io/articles?geo=02138), you need to send a "query string" to articles. Use the supplied search function as a guide: function search(...


2

How does the computer recognize that those few lines inside a JavaScript file is actually html and not JavaScript codes? It doesn't. It's not javascript or html to the function, it's data. When it is (finally) rendered by the browser, it is "recognized" as html. rather than writing part of the program in python and part in JavaScript, have ...


2

One problem is this syntax markers += marker;. That does not add an element to an array in js. The array method push adds elements to an array. Another problem is here marker.addListener(map, "click", function(). That's not the correct syntax to add a listener to a marker (extraneous argument). Review the api doc here. Once you get those things sorted, ...


2

The removeMarkers will get rid of one marker, the last one added. The problem is in addMarker. addMarker will be called for each "place" and should add one marker to the map and one marker to the markers array. Look at where this line markers[i] = marker; is and you should see that the markers array is incorrect.


1

If you use a custom icon for your marker, you can set its labelOrigin to place it underneath. https://developers.google.com/maps/documentation/javascript/markers (and then look for custom icons)


1

Looks like you missed out at least one setting for your marker. Be sure you have in your new Marker map: map, So that the markers will go on the map. I added that one line and your markers reappeared. (in context) var marker = new google.maps.Marker({ position: myLatlng, // title: place.place_name + ", " + place.admin_name1, //<-- title key ...


1

This google.maps.event.addListener(marker, 'click', showInfo(marker, articlesContent); is sending the result of the showInfo function.


1

I was able to reproduce the reported error sqlalchemy.exc.ArgumentError: This text() construct doesn't define a bound parameter named 'ne_lng' by modifying the (first) SELECT sql in the update function in application.py. (I changed :ne_lng to :ne_ln) The WHERE clause should be: WHERE :sw_lat <= latitude AND latitude <= :ne_lat AND (:sw_lng <= ...


1

Review the MDN doc on anchor tag and then verify that your add marker uses valid attributes. (Hint typo!). Perhaps clicking on the red do in the top right of the inspector will give more info. IMO close the "What's new" tab down below, since that is blocking the view of the console.


1

Observe the function signature: function addMarker(place). place is received as an argument. addMarker is called in a loop from the update function. You only need to add a marker for the place received as an argument.


1

This can happen if latitude and/or longitude are TEXT columns. They need to be NUMERIC columns, otherwise the select SQL in the update route returns no rows and addMarker doesn't get called.


1

I incorporated this addMarker function into my app and it showed the list of articles in the info window (though the articles don't have "links"). So I "tweaked" articles; changed return jsonify(lookup(request.args.get("geo"))) to return jsonify([lookup(request.args.get("geo"))]). In other words, added another level of "list" with []. It gave the same result ...


1

MarkerWithLabel is not part of Google maps APIs, it is a third party product. Here's the doc for Google Marker Labels. IMO don't let this detail distract from completing the pset.


1

Yes you can, as suggested here Google Maps API page var image = { url: "https://maps.google.com/mapfiles/kml/pal2/icon31.png", labelOrigin: new google.maps.Point(15,40) } var marker = new google.maps.Marker({ position: myLatLng, map: map, label: place["place_name"] + ", "+ place["admin_name1"], icon: image });


1

Here's a problem: marker.addListener("click",function(){ $.ajax({url:"../articles.php", type:"GET", data:{geo:place.place_name}, success:function(response){ if(response.length>0){ console.log(response); } else { console.log("slow news day!")...


1

When you first click the marker, the .done() function hasn't delivered your JSON data yet, thus content will still be "" when you call showInfo(marker, content); at the very end. Try to move showInfo(marker, content); inside your .done() function, as the last command to be executed inside it. If this solves your problem, please click the check button to ...


1

After discussing with my friends, we found the problem is due to the order of the code (although I am still not very clear why this old order would be buggy): instead of including getJSON function in the "click listener" function, the correct order should be getJSON first, then add the "click listener" to set the content of the infowindow and open it. ...


1

If you went to Developer Tools > Console, you would probably see something like ReferenceError: myLatlng is not defined on some of the lines there. The issue is that you assign myLatlng (with lowercase l) to the position property, but you declared myLatLng (with uppercase L). Also, you should add var to the declaration of myLatLng.


1

I was struggling with this for quite some time - my code looked very similar to yours. I searched forever (since I didn't really know how to express my question) until I found this here: https://stackoverflow.com/questions/751218/how-to-use-getjson-sending-data-with-post-method There you see that in the answer with only 10 votes {id: 287} is used, so I ...


1

addMarker only adds the marker image and attaches a click event to this marker. I found this information rather helpful: https://developers.google.com/maps/documentation/javascript/events?csw=1#EventArguments The function in the click event is loadinfo. Let me know, if you need additional hints.


1

As far as I can tell, the issue is that the is being passed in as a string. So I turned them into floats by doing the following (using parseFloat): var mylat = parseFloat(place.latitude); var mylng = parseFloat(place.longitude); // TODO var myLatLng = {lat: mylat, lng: mylng};


1

first-off there is some change about EDX 2015 class. read this https://courses.edx.org/courses/HarvardX/CS50x3/2015/info Now Marker with label you have to read this http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/docs/examples.html Which is given here http://cdn.cs50.net/2015/x/psets/8/pset8/pset8.html#addmarker_2 ...


1

I can see a mistake in the object you're passing to MarkerWithLabel function, I don't think a comma after "label" is needed.


Only top voted, non community-wiki answers of a minimum length are eligible