Notice: Array to string conversion error when converting array from php to javascript

Question

I'm trying to get an array of latitudes and longitudes from the php arrays $lat and $long which are being retrieved by a database.

<?php

...

$lat[$latlongindex] = $results_row['latitude'];
$long[$latlongindex] = $results_row['longitude'];



echo "
<script type=\"text/javascript\">

        var locations = $latlongindex;
        var jslat = <?php echo json_encode($lat); ?>;
        var jslong = <?php echo json_encode($long); ?>; // <----------Line 58

        var map = new GMaps({
            div: '#map',
            lat: 39.833,
            lng: -98.583,
            width: '900px',
            height: '500px',
            zoom: 4,
            zoomControl : true,
            zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
            },
            panControl : false,
        });
//------------------------------------------------ADD MARKERS--------------

        for (var i = 0; i<locations; i++) {
            map.addMarker({
            position: new google.maps.LatLng( jslat[i], jslong[i] ),

            });
        }

</script>
"; // <--------------------------------Line 83

}

}
?>

Just as a quick check I can echo json_encode($lat) and json_encode($long) and they are displayed correctly but when I try use them inside the javascript I get "Notice: Array to string conversion" in lines 58 and 83. If I explicitly state the location like:

        var jslat = [];
        jslat[0] = $lat[0];

It will run correctly but obviously just shows the first marker. Thus I know I can access the elements of the $lat and $long arrays. I feel like this is a simplistic error but can't seem to find anything on stack that is a similar issue.

Any help would be great. Thanks.

http://stackoverflow.com/questions/11722059/php-array-to-json-array-using-json-encode — Jeremy Harris, Dec 09 '14 at 22:12
Something wrong with your code. You should replace `echo "` with `?>` and further changes — sectus, Dec 10 '14 at 01:45

Veerendra · Answer 1 · 2014-12-11T04:20:00.507

// MAP CODE
        $qry_country_map = 'Select name, refugee, lat, lng FROM '.$table_name.' WHERE 1 AND status = 1';
        $country_data_map = $wpdb->get_results($qry_country_map , ARRAY_A);
        //echo "<pre>";print_r($country_data_map);exit;
        $array_string = "["; 
        for($m=0;$m<count($country_data_map);$m++) { 
         $array_string .= "['".$country_data_map[$m]['name']."', '".$country_data_map[$m]['name']."','".$country_data_map[$m]['refugee']."','".$country_data_map[$m]['lat']."', '".$country_data_map[$m]['lng']."'],";
        }
        $array_string = substr($array_string, 0,-1);
        $array_string .= "]";
        ?>
        <style>
          #map{
            height: 400px;
          }
          a[href^="http://maps.google.com/maps"]{display:none !important}
          .gmnoprint a, .gmnoprint span {
              display:none;
          }
          .gmnoprint div {
              background:none !important;
          }
        </style>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <div id="map"></div>
        <script type="text/javascript">

            var marker_image = '<?php echo $plugin_image_url;?>';
            // Define your locations: HTML content for the info window, latitude, longitude
            var locations = <?php echo $array_string;?>;

            var map = new google.maps.Map(document.getElementById('map'), {
              center: new google.maps.LatLng(26.3351, 17.2283),
                  mapTypeControl: false,
                  scaleControl: false,
                  streetViewControl: false,
                  overviewMapControl: false,
                  panControl: false,
                  zoomControl: true,
                  zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL
                  },
                  zoom: 2,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var styles = [
                    {
                        featureType: "landscape",
                        stylers: [
                            { visibility: "on" },
                            { color: "#FFFFFF"}
                        ]
                    },
                    {
                        featureType: "water",
                        stylers: [
                            { visibility: "on" },
                            { color: "#CCCCCC"}
                        ]
                    },
                    {
                       featureType: "administrative",
                       elementType: "geometry.fill",
                       stylers: [
                          { visibility: "off" }
                       ]
                    },
                    {
                        featureType: "all",
                        elementType: "labels",
                        stylers: [
                            { visibility: "off" }
                        ]
                    }
                  ];
                  map.setOptions({styles: styles});

            var infowindow = new google.maps.InfoWindow({
              maxWidth: 160 
            });

            var marker;  
            var markers = new Array();

            // Add the markers and infowindows to the map
            for (var i = 0; i < locations.length; i++) 
            {
                if(locations[i][3]!='' && locations[i][4]!='' && locations[i][2]!='')
                {
                    var scale;
                    if(locations[i][2]<100)
                        scale = locations[i][2];
                    else if(locations[i][2]>100 && locations[i][2]<500)
                        scale = locations[i][2]/25; 
                    else if(locations[i][2]>500 && locations[i][2]<1000)
                        scale = locations[i][2]/60;
                    else if(locations[i][2]>1000 && locations[i][2]<10000)
                        scale = locations[i][2]/275;     
                    else if(locations[i][2]>10000 && locations[i][2]<100000)
                        scale = locations[i][2]/1600;
                    else if(locations[i][2]>100000 && locations[i][2]<500000)
                        scale = locations[i][2]/7500;
                    else if(locations[i][2]>500000 && locations[i][2]<1000000)
                        scale = locations[i][2]/10500;  

                    scale = Math.round(scale);
                    if(scale!=0)
                    {
                        //console.log(scale);
                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][3], locations[i][4]),
                        map: map,
                        icon: {
                        url: marker_image,
                        scaledSize: new google.maps.Size(scale, scale),
                        size:new google.maps.Size(scale, scale)
                        }
                        });

                      //ADD EVENT TO SHOW INFOWINDOW
                      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
                        return function() {
                          infowindow.setContent(locations[i][0]);
                          infowindow.open(map, marker);
                          //marker.setIcon(new google.maps.MarkerImage('http://192.168.5.33/map-marker-hover.png'));
                          //marker.icon.scaledSize = new google.maps.Size(scale,scale);
                          //marker.icon.size = new google.maps.Size(scale,scale);
                        }
                      })(marker, i));

                      //ADD EVENT TO HIDE INFOWINDOW
                      google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
                        return function() {
                          infowindow.close(map, marker);
                          //marker.setIcon(new google.maps.MarkerImage('http://192.168.5.33/map-marker.png'));
                          //marker.icon.scaledSize = new google.maps.Size(scale,scale);
                          //marker.icon.size = new google.maps.Size(scale,scale);
                        }
                      })(marker, i));       
                    }
                }
            }
        </script>

See the variable named $array_string i have created it in php and then just echo in js to make a js array and then i have looped with the lat and long to display markers.

i have coded some things for the custom marker image and marker size scaling according to value and effect on mouseover and mouseout.

You just need to copy paste this code make minute changes and you are done. Let me know if something goes wrong :)

If I add a for loop to populate the array jslat or jslong. 'for(var t = 0; t< locations; t++) { jslat[t] = ''; jslong[t] = ''; }' I get Undefined index: t error. Idk if this is what you meant. — LowMediumHigh, Dec 11 '14 at 00:57

Notice: Array to string conversion error when converting array from php to javascript

1 Answers1