How to access .js function in html?

Question

My experience in javascript is lacking terribly.. And just this one question alone will solve about 90% of my problems at current!

So here I have a map that displays, and their is a marker langlat placed already in the .js file, what I require is to be able to add markers through php, so I'm assuming I'll have to pass an array foreach and run the script to add each marker. But accessing the function appears to be my main issue.

<div class="col-md-6">
    <div class="content-wrap" id="map">

        <div class="wrapper" >
        </div>

    </div>
</div>


<script src="js/maps.js"></script>
<script src="plugins/gmaps.js"></script>

maps.js

var googlemap = function () {

    var map;

    return {
        init: function () {
            map = new GMaps({
                div: "#map",
                lat: ***,
                lng: ***
            });
            map.addMarker({
                lat: ***,
                lng: ***,
                title: "Marker with InfoWindow",
                infoWindow: {
                    content: "<p>***</p>"
                }
            });
        }
    };
}();

$(function () {
    "use strict";
    googlemap.init();
});

How do I reach the function in the .php file?

also note, the current map markers in the .js function work correctly.

possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — Adrian Wragg, Dec 16 '14 at 13:42
Not necessarily the issue, my issue is to actually access the function from the php file to add markers, not to pass the variables as such. — Danny123, Dec 16 '14 at 13:43
You should just include the file as you have with your other JS files. If you're relying on PHP to read data from a database and then add the markers, you would echo the JS in your PHP while loop. — Jay Blanchard, Dec 16 '14 at 13:45
Maybe not, but the answers to that question should give you a good grounding in where you were going wrong and how to solve your problem. — Adrian Wragg, Dec 16 '14 at 13:45

score 2 · Accepted Answer · answered Dec 16 '14 at 13:49

You cant reach the .js file with a PHP script, unless you want to make some heavy ugly function to rewrite the file for every load.

Make it an inline-script in your html file instead.

Replace:

<script src="js/maps.js"></script>

With:

<script type="text/javascript">
var googlemap = function () {

    var map;

    return {
        init: function () {
            map = new GMaps({
                div: "#map",
                lat: <?php echo $lat; ?>,
                lng: <?php echo $lon; ?>
            });
            map.addMarker({
                lat: <?php echo $lat; ?>,
                lng: <?php echo $lon; ?>,
                title: "Marker with InfoWindow",
                infoWindow: {
                    content: "<p>***</p>"
                }
            });
        }
    };
}();

$(function () {
    "use strict";
    googlemap.init();
});
</script>

score 0 · Answer 2 · answered Dec 16 '14 at 13:47

0

I think you should use ajax to get what you need from the server. Return an object and use the data you are returned.

answered Dec 16 '14 at 13:47

wayzz

585
6
23

I appreciate ajax would be useful if a form is submitted to return the data, what if the data was already loaded upon the page being loaded? Then I wouldn't need ajax..? – Danny123 Dec 16 '14 at 13:49
specifically I want to take the map.addMarker and use it in the html/php side of the document, how do I access that? – Danny123 Dec 16 '14 at 13:50

How to access .js function in html?

2 Answers2