How do I display multiple google map markers from a PHP array?

Question

I am trying to display markers on a Google Map from a PHP array containing lat & long values.

The PHP array looks like this at the moment:

Array
(
[0] => Array
    (
        [0] => 55.8490116, -4.222272800000042
        [1] => 54.5979369, -7.274279400000069
    )

[1] => Array
    (
        [0] => 55.8490116, -4.222272800000042
    )

)

I then add this array to a JS array on the PHP like so:

<script type="text/javascript">
var markers = <?php echo $myarray; ?>;
</script>

And then in my JS for the map it looks like:

var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();

console.log(markers);

for (i = 0; i < markers.length; i++) { 

    var pos = new google.maps.LatLng(markers[1][0]);

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

    google.maps.event.addListener(marker, 'click', (function(marker, i) {

        return function() {
            infowindow.setContent(markers[1][0]);
            infowindow.open(map, marker);
        }

    })(marker, i));

}

I am not sure where to go next. I know my my array does not mimic what is required by the Google Maps API, but not sure how I can change it to suit.

Thanks Robert

Any luck with the answer I posted? You haven't replied to let me know if it worked or not. — Lazar Vuckovic
– Lazar Vuckovic, Commented Nov 5, 2012 at 11:31

Lazar Vuckovic · Accepted Answer · 2012-10-31 14:34:33Z

2

I think the problem with your approach is in echoing the array.

The way I would try to fix it would be creating an empty array in JS called markers, looping through all the values of the PHP array and then appending each of the values to markers.

Also note that you have an array of arrays in PHP, so you'll need a nested loop.

Please let me know if you need any code samples, or this would suffice.

answered Oct 31, 2012 at 14:34

Lazar Vuckovic

80810 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suresh Kamrushi · Accepted Answer · 2015-08-14 08:21:07Z

You can do like this:

<?php
$marker[] = array(
                "lat"=> '17.454000',
                "lng"=> '78.434952');
$marker[] = array(
                "title"=> 'shilparamam',
                "lat"=> '17.452665',
                "lng"=> '78.435608',
                "description"=> 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.');
$marker[] = array(
                "title"=> 'image hospitals',
                "lat"=> '17.452421',
                "lng"=> '78.435715',
                "description"=> 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>    
    <script type="text/javascript">
        <?php
        $objJSON = json_encode($marker);
        echo "var markers  = ". $objJSON . ";\n";
        ?>
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);

        }
    </script>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
</body>
</html>

Collectives™ on Stack Overflow

How do I display multiple google map markers from a PHP array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related