We Keep Coding

Trying to add GEOJSON as marker on mapbox

I would like my map to display GEOJSON as markers which it currently does.
I created 3 files to make 3 different API calls.
However, only the first script file is executed and the rest are ignored.
I would like the markers to be displayed based on the users chosen file path . (e.g "/daily", "/", "monthly")
At the moment the mapbox markers are is only using the data from the first script. The data only changes when I manually swap the script files around.
This is my first StackOverFlow question, so I am unable to post picture of my results. I have linked my issue with pictures of the the marker rendering out data based on the order of script files.
My Pr: https://github.com/Rhianna20/disaster_check/pull/13
My issue: https://github.com/Rhianna20/disaster_check/issues/14
I would appreciate any tips or advice on this, thank you!
My code
dailyMapbox.js
The client/monthly, client/daily files all contain the same code apart from the url value being different.
I then placed the script files inside of document.js
Here is my app.js file structure. Which does not use my client/public files. Instead document.js is called on each file path.

In your Issue we can see this error : Identifier map has been declared.
The problem is that you add 3 scripts to your HTML, and the same variable map is declared in the 3 scripts.
Do you have control on the files client/daily and client/monthly ?
If yes and if you know a little javascript, you can implement the user-chosen
map yourself.
If not, you can create a select element where users can choose an existing
file and then choose to only display this file...
In either way you will need to get your hands dirty in javascript.
We can help you more, but we will need you to add some relevant code in your question

How do I combine two scripts into one Google Maps API

I have two scripts and basically what I want to do is combine them in order to render the result of both in one map.
I already tried to copy/past, but for a reason that I ignore, it's not working (I just start learning so I have basic knowledge in js and gmaps api).
So please before down vote, understand that what I want is just to know if YES or NO there is a way to do such a thing. I tried to search on the net and read Google developer doc but can't find an answer.
Thank you.

It depends on how you use the two scripts. In JavaScript, all scripts you use/import into your html run in the same global scope. So they can access each other's global objects. But keep in mind that the script tags are executed sequentially in the order of appearance.
So:
You can have as many tags as you would like in a document.
The tags are processed as they are encountered.
How to use Script tag:
<script>
// Inline JavaScript code here
</script>
<script src="external.js"></script>
More info:
https://developer.mozilla.org/en/docs/Web/HTML/Element/script
multiple versus single script tags

best option for inserting javascript into multiple existing pages

The website I'm working on has hundreds of existing pages, and I want to insert an Autocomplete feature into every page. I don't want to have to put the Javascript <script src=> call into the hundred of pages. The field using the JS is contained in the Nav which is called on every page from a php include, so getting the HTML in is no problem.
There are a few places I think I could put the Javascript in -
1. Either add the Javascript functions to an existing Javascript Script that is called in the header,
2. or even put in the <script> call in an existing php include that calls the $_SESSION and mysql data to everypage, but that is called even before the <!DOCTYPE> declaration, so I don't think I would want to put it there.
3. But, because I would like to keep it in it's own file (In case it needs replacing, tidiness, etc) I want to keep the autocomplete Javascript in it's own file. Would it be ok to put a <script> call inside of an existing <script call>? I hope that is clear.
4. OR, put the <script src> inside the nav.php (which is called on everypage). But I'm not sure how well putting a PHP include inside of a Javascript file would work out.
If anyone has any opinions or advice as to which would work the best, please let me know. Thanks!

Best option is to create jquery plugin and use it where ever required. Dont forget to make proper use of $ or jquery, because it may crash between plugin and script file in which plugin is placed.

Managing page specific Javascript: 1 big file with conditionals or multiple files

In my project I have a load of functions that are used on every page, so I have put these in a single javascript file common.js and have included it in my footer template. My questions is, what is the best way to handle page-specific javscript?
For example, on one of my pages I have a google map. If my map js code is run on a page where I don't have an element with id map_canvas, I get an error.
Method 1: I could write some PHP which echos an additional script tag requesting map.js if and only if I'm on a map page.
Method 2: I could give the <body> of my map page an id of "map_page", then I could write a conditional clause in common.js along the lines of:
if (#map_page exists){
put contents of map.js here
}
The problem with method 1 is that it increases the number of requests to the server.
The problem with method 2 is that it bloats my common javascript file.
Please can somebody explain, which, if any would be the preferred method to do this, or if neither are suitable, what I should do instead?
I have approximately 10 page-specific javascript files to deal with.
Thanks

I would say that simpler is better. On every page, just add a script tag calling map.js. Or, in your common.js, you don't need to paste all of map.js's code. You can just create a new script tag with the js and call map.js like that. I would not recommend the php method. The easiest and simplest, therefore the least likely to be buggy method, is just to add another script tag to the pages that need it. Or if that is not an option, common.js could include this:
if(need map.js){
var mapjs=document.createElement("script");
mapjs.type="text/javascript";
mapjs.src="map.js";
document.body.appendChild(mapjs);
}

How to write javascript code using external files only

When using HTML5 Boilerplate, you are given a script.js file and the jquery file are all loaded after the body.
How do I know when to call certain code for a specific page? For eg. What if on /maps I want to load google maps dynamically, how do I accomplish this without putting it on the page and using script.js file while having it not load the map for all pages?
Basically, how do I structure my code when I can't have any script in my pages? How do I know what code to call for a particular page?

Script files that are included are immediately executed, so inside the script file you could have a section check the URL of the page you're on.
For example, something like this:
if (window.location.href === "http://myapp.com/maps") {
// call the map function or whatever ...
}
But, out of curiosity, why can't you add a script file to the specific page you're on? I'd only recommend the solution above if you absolutely cannot edit the HTML of your pages.

I too have the same question. I searched and just found these two
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution/
I am going through of this, and not yet completely reviewed. See if it is useful to you in between.