show information in a continuous manner using javascript

Question

show information in a continuous manner using javascript

I'm having trouble extracting the latitude and longitude coordinates of markers to display them on the map. Even though my parser.php file successfully retrieves data from the database, I am struggling to format it into JavaScript. Any suggestions?

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: -25.363882, lng: 131.044922},
      zoom: 14
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    $.getJSON('parser.php', function(items) {
        for (var i = 0; i < items.length; i++) {
            (function(item) {
                addMarker(item.lat, item.lon);
            })(items[i]);
        }
    });

    }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Here is the output from parser.php:

[{"0":"33.880561","lat":"33.880561","1":"35.542831","lon":"35.542831"},{"0":"-25.363882","lat":"131.044922","1":"35.513477","lon":"35.513477"}]

javascript

Answer 1

Answer №1

The addMarker function requires the map parameter to be passed in.

function addMarker(map, lat, long) {
    var latlong = google.maps.LatLng(lat, long);
    return new google.maps.Marker({
        position: latlong,
        map: map
    });
}

Now, your loop should look like this:

for (var i = 0; i < items.length; i++) {
    item = items[i];
    addMarker(map, item.lat, item.lon);
}

It is unnecessary to enclose the addMarker calls in a closure since they are not independent callbacks.

Answer 2

The addMarker function requires the map parameter to be passed in.

function addMarker(map, lat, long) {
    var latlong = google.maps.LatLng(lat, long);
    return new google.maps.Marker({
        position: latlong,
        map: map
    });
}

Now, your loop should look like this:

for (var i = 0; i < items.length; i++) {
    item = items[i];
    addMarker(map, item.lat, item.lon);
}

It is unnecessary to enclose the addMarker calls in a closure since they are not independent callbacks.

show information in a continuous manner using javascript

Answer №1

Similar questions

Understanding the Contrast between Relative Paths and Absolute Paths in JavaScript

JavaScript and PHP/HTML template engine technology

Avoid showing images when the link is not working

Error message in JQuery Ajax: "Invalid request to web service, parameter value for 'Object' is missing"

Navigate to the end of the progress bar once finished

Using JQuery to trigger the onchange event for a select tag

What is the process for creating a React Component with partially applied props?

Managing dynamic input texts in React JS without using name properties with a single onChange function

Configure unique headers for various environments

Display dynamic web content developed with JavaScript for public viewing

Refresh the page without reloading to update the value of a dynamically created object

Preventing default behavior in a JQuery post request

Eliminating unique phrases from text fields or content sections with the help of jQuery or JavaScript

Cloud Firestore trigger fails to activate Cloud function

How come CSS styles are not being applied to forms in AngularJS?

What is the best way to handle newline characters ( ) when retrieving text files using AJAX?

Template does not reflect changes made to filters in real-time

When switching from JavaScript to jQuery, the button values become invisible

Word.js alternative for document files

Guidance on sending Ajax response to JavaScript function in OctoberCMS