Fill PHP in the Google Map script does not work

advertisements

I'm sure this is a simple issue, but I just can't seem to find the answer. I am trying to simply put google map on a site using dynamic lat & long from php call.

When I have this code it works:

     <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
  var panoramaOptions = {
    position: bryantPark,
    pov: {
      heading: 165,
      pitch: 0
    },
    zoom: 1
  };
  var myPano = new google.maps.StreetViewPanorama(
      document.getElementById('map-canvas'),
      panoramaOptions);
  myPano.setVisible(true);
}

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

    </script>

    <div id="map-canvas"></div>

However, when I update it so that the LatLng is dynamic with php call like so:

<?php include("inc/conn.php"); ?>

....

 <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var bryantPark = new google.maps.LatLng(<?=$row["field_Latitude"]?>, <?=$row["field_Longitude"]?>);
  var panoramaOptions = {
    position: bryantPark,
    pov: {
      heading: 165,
      pitch: 0
    },
    zoom: 1
  };
  var myPano = new google.maps.StreetViewPanorama(
      document.getElementById('map-canvas'),
      panoramaOptions);
  myPano.setVisible(true);
}

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

    </script>

    <div id="map-canvas"></div>

When I view the source, I see that the lat & long are populating, but there is just a gray box where the street view should be.

Any thoughts?

Thanks!


When you want to show a map when streetView is not available(let's assume that streetview is not available when there is no panorama within a radius 50 meters), create a map and request the streetViewService to check if there is a panorama available for the given location.

When it does, set the position of the panorama and show it, otherwise do nothing.

function initialize() {
      //center of the map and position of the panorama (when available)
  var center          = new google.maps.LatLng(42.698776, -86.181015),

      //first initialize the map
      map             = new google.maps.Map(
                                            document.getElementById('map-canvas'),
                                            {
                                              zoom:21,
                                              center:center,
                                              mapTypeId:google.maps.MapTypeId.SATELLITE
                                            }
                                           ),
      svService       = new google.maps.StreetViewService(),
      panoramaOptions = {
                            pov: {
                                  heading: 165,
                                  pitch: 0
                              },
                            zoom: 1,
                            visible:true
                        };
        //test whether a panorama is available
      svService.getPanoramaByLocation(center, 50, function(data,status){

          if(status==google.maps.StreetViewStatus.OK){
              //panorama is available, show it
              var sv=map.getStreetView();
              sv.setPosition(center);
              sv.setOptions(panoramaOptions);
          }

      });
}

Demo: http://jsfiddle.net/doktormolle/7noptz5x/