multiple marker placing in google map api using jquery where coords will be from database

Question

I am using below code to mark multiple marker on google map using Google Map API JS

I am pushing json data to locations array .

JSON have coordinates

18.53515053 73.87944794 and 18.53640175 73.88206482

and when I request data using array it is giving me the correct result.

when I pushed data to locations array it is giving me

Array [ "18.53515053", "73.87944794", "18.53640175", "73.88206482" ]

but I want below type of result

var locations = [[18.53515053, 73.87944794], [18.5670762, 73.9084194]]

Please help me

function multimarker(map)
{
        jQuery.ajax({                              
    url: baseurl +  "getdriverlocation.php",
    type: "JSON",
    async: false,
    success: function(data){
       var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)

        jQuery(myArray).each(function( index, element ) {     
        driverlat = element.driver_lat;
        driverlng = element.driver_lng;
        locations.push(driverlat , driverlng)
});

    alert (locations)
} 
});
  for (i  = 0; i < locations.length; i++)
                 { 
                 alert(    locations[i][0]);
                var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
            drivermarker=new google.maps.Marker({position:latlng1});
            drivermarker.setMap(map);
           var infowindow = new google.maps.InfoWindow();
           google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
            return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, drivermarker);

        }
      })(drivermarker, i));
                 }

}

Answer 1

Here is the live working code for you my friend, try this 100% working code

///your locations array 
var locations = [
  ['Bondi Beach', 49.2234, 55.303423, 1],
  ['Coogee Beach', 50.3023, 101.05342, 2],
  ['Cronulla Beach', 59.125435, 105.15234, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187,4],
  ['Maroubra Beach', -33.950198, 151.259302, 5],
  ['erf Beach', -33.950198, 151.000000, 6],
  ['fgh Beach', -33.950198, 150.400302, 7],
  ['mnb Beach', -33.950198, 150.900302, 8],
  ['abc Beach', -33.262, 150.700302, 9],
  ['xyz Beach', -33.3672378, 150.800302, 10],
  ['hhhhhhh Beach', -34.34568768, 150.83267211914062, 11],
  ['Bondi Beach 1', -33.23547564, 151.274856, 1],
  ['Coogee Beach 2', -33.96435, 151.259052, 2],
  ['Cronulla Beach 3', -34.67845234, 151.157507, 3],
  ['Manly Beach4', -33.3478899, 151.28747820854187,4],
  ['Maroubra Beach5', -33.132425576, 151.259302, 5]
];

var map;
var markers = [];

function init()
{
  map = new google.maps.Map(document.getElementById('map'), {
	zoom: 8,
	center: new google.maps.LatLng(-33.92, 151.25),
	mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var num_markers = locations.length;
  for (var i = 0; i < num_markers; i++) {  // alert(locations[i][1]+'===='+locations[i][2]+'=='+locations[i][0]);
	markers[i] = new google.maps.Marker({
	  position: {lat:locations[i][1], lng:locations[i][2]},
	  map: map,
	  html: locations[i][0],
	  id: i,
	});

	google.maps.event.addListener(markers[i], 'click', function(){
	  var infowindow = new google.maps.InfoWindow({
		id: this.id,
		content:this.html,
		position:this.getPosition()
	  });
	  google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
		markers[this.id].setVisible(true);
	  });
	  this.setVisible(false);
	  infowindow.open(map);
	});
  }
  
}


$( document ).ready(function() {
	google.maps.event.addDomListener(window, 'load', init); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry,drawing"></script>

<div id="map" style="width: 100%; height: 500px;"></div>

Answer 2

This is how I got my result what I want to get.

var driverlat,driverlng;
var locations = [];

function multimarker(map)
    {
            jQuery.ajax({                              
        url: baseurl +  "getdriverlocation.php",
        type: "JSON",
        async: true,
        success: function(data){
           var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)

            jQuery(myArray).each(function( index, element ) {     
            driverlat = element.driver_lat;
            driverlng = element.driver_lng;
            locations.push([driverlat , driverlng])
    });

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

                    var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
                drivermarker=new google.maps.Marker({position:latlng1});
                drivermarker.setMap(map);
               var infowindow = new google.maps.InfoWindow();
               google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
                return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, drivermarker);

            }
          })(drivermarker, i));
                     }

    } 
    });

    }

Answer 3

Try the following function

Note what you are currently trying to do won't work because your ajax is asynchronous so the values are return when the ajax completes

function getLocationOfDriver()
{

    jQuery.ajax({                              
    url: baseurl +  "getdriverlocation.php",
    type: "JSON",
    async: false,
    success: function(data){
       var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)
        var aaray =[];
        $.each(myArray,function( index, element ) {     
        driverlat = element.driver_lat;
        driverlng = element.driver_lng;
        aaray.push([driverlat,driverlng])

       });
        console.log(aaray) 
}});
} 

Answer 4

try this

var locations = [[18.53515053, 73.87944794],[18.53515053, 73.87944794]];
var output = locations.map(function(val){return {val1: val[0], val2: val[1]}})
document.body.innerHTML += JSON.stringify(output,0,4);

Edit: In your code you have shared, make these changes

var locations = myArray.map( function( value ) {     
    return { val1 : value.driver_lat, val2: value.driver_lng };
});