谷歌地图javascript v3 + php

I have made connection with database at top and fetched the records in associative array

<? php include_once('dbconnect.php');
$sql = "SELECT * FROM maps";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
    $arr[] = $row;
}
?>

I have a script at the bottom but about the </body> tag which is given below:

  <script>
  function initialize(){
  var map;
   var locations = <?php echo json_encode($arr); ?>;
  var strfy=JSON.stringify(locations);

   var location=JSON.parse(locations);

   var mapoption={
    zoom: 10,
   center: new google.maps.LatLng(-33.92, 151.25),
   mapTypeId: google.maps.MapTypeId.SATELLITE
   };
   map = new google.maps.Map(document.getElementById('map'), mapoption);

   var infowindow= new google.maps.InfoWindow();
   var marker,i;
   for(i=0;i<location.length;i++){

     marker = new google.maps.Marker({
    position: new google.maps.LatLng(location.query.lat,location.query.longits),
      map: map
      });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
      infowindow.setContent(location.name);
      infowindow.open(map, marker);
      }
     })(marker, i));
     }

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

I have the body part at middle

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

The record has been successfully fetched in associative array but I'm facing a problem. When I run the localhost, it doesn't show me googlemap but errors

What is causing this problem?

Check that you are explicitly setting protocol when adding google maps api. For localhost it should start with http:// or https://. It will tell browser to load library from web and not from filesystem.

it seems like a var location is a global variable - window.location, so when you trying to assign a value, browser does redirect, just rename it, or do something like that

(function(){ YOUR_CODE_HERE })();

for encapsulation

You need somethink like this:

function initialize() {
    var map;
    var locations = <? php echo json_encode($arr); ?> ;// $arr must be not an associative array

    //2 next strings doesn't metter
    //var strfy = JSON.stringify(locations);
    //var location = JSON.parse(strfy);

    alert(locations);
    var mapoption = {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById('map'), mapoption);

    var infowindow = new google.maps.InfoWindow();
    var marker;
    for (var i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i].lat, locations[i].longits),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i].name);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
google.maps.event.addDomListener(window, 'load', initialize);