Pset8 AddMarker not working - update.php returns invalid JSON?

Question

I'm having some trouble with pset8 in that my addMarker function is not working. To me, it looks correct and I've gone through the documentation several times to make sure but the markers simply aren't appearing.

Can someone please tell me if my code is terribly wrong and help lead me in the right direction? Also it seems that "marker with label" no longer exists and most other solutions here refer to that, so this is just the basic marker.

Also, I have just noticed an error in Chrome's development tab. It says "SyntaxError: Unexpected token W in JSON at position 1" in reference to scripts.js with the update function. I have no idea what this means and I even started over thinking I screwed up somewhere but the error is there from the start! Any ideas what this means and if it's what is causing my marker issue?

Any help greatly appreciated! Thanks.

My addMarker code is below.

function addMarker(place)
{
    var myLatLng = new google.maps.LatLng(parseFloat(place.latitude), parseFloat(place.longitude));

    // create marker

    var marker = new google.maps.Marker({
        map:map,
        position: myLatLng
    }); 

    google.maps.event.addListener(marker, "click", function() { 
        loadinfo(marker, place.postal_code); 
    });

    // add to array
    markers.push(marker); 
}

EDIT: After further investigation, I have determined that the update function consistently fails (hence error) as update.php seems to be returning an invalid JSON - hence, addMarkers never runs! I don't understand why update is failing though as that is entirely the staff's code, I believe. Or am I wrong, is there some part of code I've written that is feeding into update and thus making it fail?

Answer 1

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.

Another difference I see between your code and mine is that I used:

var marker = new MarkerWithLabel({
    ... a bunch of stuff ...
});

instead of using

var marker = new google.maps.Marker({
    ... a bunch of stuff ...
});

as you did. That doesn't mean that your way is wrong, but the problem specification does suggest that we should use MarkerWithLabel() instead of google.maps.Marker.

If you choose to do things that way, you may find it helpful to view the MarkerWithLabel examples on GitHub.

The problem specification for Pset8 links to http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/ -- but that link is broken!

Luckily, you can find the project on GitHub:

Code is here cause google blew stuff up.

EDIT: (because I can't comment from mobile)

My point re: MarkerWithLabel() is simply that I didn't use the same approach as you did, so I am kind of comparing apples to oranges here.

I like your hunch that the problem is with the JSON returned from update.php. Please update your question to include the JSON returned by visiting update.php directly in the browser, passing in a query that won't return a lot of results.

EDIT2: Busy day today, but I just want you to know that I haven't forgotten about you and I'll post a follow-up as soon as I'm able!

EDIT3: OK, so you found out it was a permission error by using chmod -R 777 *. Now, let's see how much we can restore appropriate permissions without causing the markers to disappear.

Open a new Terminal tab in ide50 and execute the following commands, one at a time, pausing to reload your Mashup website between each command. (Hold down the Shift key while you press the browser's Reload button to make sure that you are bypassing your local cache and reloading everything directly from the server.)

Here are the commands to use, copied from another answer I gave recently. (Please read this for a more complete explanation!)

To restore your permissions to sensible defaults after using chmod -R 777 *, the following commands may help:

cd ~/workspace/pset8
find . -type d | xargs chmod 755
find . -name *.php | xargs chmod 640
find . -name *.html | xargs chmod 644
find . -name *.css | xargs chmod 644
find . -name *.js | xargs chmod 644
chmod 644 ./public/fonts/*

Note: I have not tested these exact commands on my own pset8 directory, because I have not used chmod -R 777 * on it, but I believe that they will help to repair the damage without causing trouble with the Mashup website.

I am confident that these commands will fix your permissions without causing breakage -- but if at any point, your markers disappear, or your site breaks in any other way, let me know what command you executed immediately before that happened and I'll help you to fix it.

By the way, if this helps you to resolve your issue, please let me know by clicking on the green checkmark. Otherwise, this will forever haunt the forum as a zombie unanswered question.

EDIT4: I figured out how to run update.php in the browser by using the contents of $_SERVER['QUERY_STRING'] to recreate a valid query string and append it to the URL for my update.php. It's only a little confusing. For reference, the query string should look something like update.php?ne=41.868658668750605%2C-71.29941358642577&sw=41.771304329637616%2C-71.53218641357421 (those are the coordinates for Providence, Rhode Island.) I know you might not be looking to debug that any more, but I thought I'd include it here just in case someone else wants to know.

Answer 2

You can use the following chmod in your pset directory. It also works.

chmod 700 bin bin/import includes vendor

chmod 711 public public/css public/fonts public/img public/js

chmod 664 includes/*.php public/*.php

chmod 644 public/css/* public/fonts/* public/img/* public/index.html public/js/*

chmod 731 includes vendor

chmod 664 *.json

chmod 731 ../pset8

chmod 731 vendor/library50-php-5 vendor/library50-php-5/CS50 

chmod 664 vendor/library50-php-5/CS50/CS50.php