I am trying to show markers on google map. And it is working fine if I use static array for marker's lat and long.

But when I try to make dynamic using php array, then it is not working.

Here is the code.

 $(document).ready(function(){
   var var_locations = <?=json_encode($locations)?>;

/****** Array which need to make Dynamic *********/
var locations=[
        ['Location <br>Name', 13.0104292, 77.64844689999995, 1],
        ['Location <br>Name', 28.6699553, 77.10752720000005, 1],
    ];
    function initialize() {
        console.log(locations);
        var mapOptions = {
            center: new google.maps.LatLng(20.5937, 78.9629),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        var map = new  google.maps.Map(document.getElementById("map"),mapOptions);

        var  i;
        

        for (i = 0; i < locations.length; i  ) {
            
          var infoWindow = new google.maps.InfoWindow({
                content: locations[i][0],
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                title:locations[i][0]
            });  
            google.maps.event.addListener(marker, 'click', (function(mm, tt) {
        return function() {
            infoWindow.setContent(tt);
            infoWindow.open(map, mm);
        }
    })(marker, locations[i][0]));

        }
        

    }
google.maps.event.addDomListener(window, 'load', initialize);    

});

I want following array in above code to be dynamic

var locations=[
    ['Location <br>Name', 13.0104292, 77.64844689999995, 1],
    ['Location <br>Name', 28.6699553, 77.10752720000005, 1],
];

For that I am using following code to make it dynamic

var var_locations = <?=json_encode($locations)?>;
var locations=[
       var_locations.forEach(function(item) {
            [item.clinicName, item.latitude, item.longitude],
        });
    ];

But it is not working. To test whether loop is working, I tried to print in console value (item.latitude) in loop, And values are being printed, Means loop is working fine.

But if I use loop inside js array then it is not working. Nor giving error through which I can identify some problem.

How I can make that array dynamic?

Update

[
{
    "clinicName": "Dummy clinic",
    "doctorName": "Any name",
    "phoneNumber": 234242342,
    "address": "test address, city",
    "latitude": "13.0104292",
    "email": "[email protected]",
    "longitude": "77.64844689999995"
},
{
    "clinicName": "Dummy clinic",
    "doctorName": "Any name",
    "phoneNumber": 234242342,
    "address": "test address, city",
    "latitude": "13.0104292",
    "email": "[email protected]",
    "longitude": "77.64844689999995"
},
]

This is json array, I am getting from api. And I converted that array in php array to make it use on my page.

CodePudding user response：

The forEach does not return anything. Also you do not have any JSON in the client. It is already an object

You need a map - unless you simply create the array as it is supposed to look like on the server

Here I also convert the lat/long to a float

const locations = [
{
    "clinicName": "Dummy clinic",
    "doctorName": "Any name",
    "phoneNumber": 234242342,
    "address": "test address, city",
    "latitude": "13.0104292",
    "email": "[email protected]",
    "longitude": "77.64844689999995"
},
{
    "clinicName": "Dummy clinic",
    "doctorName": "Any name",
    "phoneNumber": 234242342,
    "address": "test address, city",
    "latitude": "13.0104292",
    "email": "[email protected]",
    "longitude": "77.64844689999995"
},
].map(item =>  ([item.clinicName,  item.latitude,  item.longitude]))
console.log(locations)

CodePudding user response：

Assuming the JSON is an array of objects.

const json = [{
  clinicName:"Location 1",
  latitude:13.0104292,
  longitude: 77.64844689999995
},{
  clinicName:"Location 2",
  latitude:13.0104292,
  longitude: 77.64844689999995
}];

const locations = json.map(location => ([location.clinicName, location.latitude,location.longitude ]));
console.log(locations);