Populating PHP inside Google Map script not working - php

Question

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!

Answer 1

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/

Answer 2

First of all I will use <?php echo $row[...]; ?> instead of <?= $row[...] ?> , just to be sure that code works also if you have short tags disabled.
Secondly, I'd put:
<?php
$row = array(
'field_Latitude' => 37.869260,
'field_Longitude' => -122.254811
);
?>
instead of your include call and check the results to verify if I have something wrong in the included file.
In any case you should inspect the resulting HTML and check what are the real arguments passed to LatLong instead of the expected ones.