Radi Radi - 1 year ago 54
Javascript Question

Adding Street View image next to the Google Map with marked point

I need to add Street View image of the Google Map with marker point. For this I need to modify this javascript code:

<div id="property_map"></div>
<script>
/* Property Detail Page - Google Map for Property Location */

function initialize_property_map(){

var propertyMarkerInfo = <?php echo json_encode( $property_marker ); ?>

var url = propertyMarkerInfo.icon;
var size = new google.maps.Size( 42, 57 );

// retina
if( window.devicePixelRatio > 1.5 ) {
if ( propertyMarkerInfo.retinaIcon ) {
url = propertyMarkerInfo.retinaIcon;
size = new google.maps.Size( 83, 113 );
}
}

var image = {
url: url,
size: size,
scaledSize: new google.maps.Size( 42, 57 ),
origin: new google.maps.Point( 0, 0 ),
anchor: new google.maps.Point( 21, 56 )
};

var propertyLocation = new google.maps.LatLng( propertyMarkerInfo.lat, propertyMarkerInfo.lang );
var propertyMapOptions = {
center: propertyLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions);
var propertyMarker = new google.maps.Marker({
position: propertyLocation,
map: propertyMap,
icon: image
});
}

window.onload = initialize_property_map();
</script>


I found online the code for displaying Google Maps and Street View Side by side and that's something I want to achieve, but I need this to be dynamic and use php variable for the property location.

<div id="map"></div>
<div id="pano"></div>
<script>

function initialize() {
var fenway = {lat: 42.345573, lng: -71.098326};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>


I tried to copy/paste piece of code responsible for Street View Panorama, but with no success.I would appreciate any help with this.

UPDATE:
I tried to combine these two codes in one and the result was that the google map hangs(cant be move with mouse) and the marker was gone as well. No signs of street view either. This is the code I tried:

<div id="property_map"></div>
<div id="pano" style="float:left; height:100%; width:45%"></div>
<script>
/* Property Detail Page - Google Map for Property Location */

function initialize_property_map(){

var propertyMarkerInfo = <?php echo json_encode( $property_marker ); ?>

var url = propertyMarkerInfo.icon;
var size = new google.maps.Size( 42, 57 );

// retina
if( window.devicePixelRatio > 1.5 ) {
if ( propertyMarkerInfo.retinaIcon ) {
url = propertyMarkerInfo.retinaIcon;
size = new google.maps.Size( 83, 113 );
}
}

var image = {
url: url,
size: size,
scaledSize: new google.maps.Size( 42, 57 ),
origin: new google.maps.Point( 0, 0 ),
anchor: new google.maps.Point( 21, 56 )
};

var propertyLocation = new google.maps.LatLng( propertyMarkerInfo.lat, propertyMarkerInfo.lang );
var propertyMapOptions = {
center: propertyLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions);
var propertyMarker = new google.maps.Marker({
position: propertyLocation,
map: propertyMap,
icon: image
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: propertyLocation,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);

}

window.onload = initialize_property_map();
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=IremovedmyAPI&callback=initialize">
</script>


Looks like the problem is that I have two function calls but I don't know how to convert this new code into one call.

Answer Source

You have an error in your onload function definition.

window.onload = initialize_property_map();

Should be

window.onload = initialize_property_map;

The () after the function causes it to be executed immediately and the returned value used as the function to execute "onload" which is null since the function doesn't return anything.

(and map.setStreetView(panorama); should be propertyMap.setStreetView(panorama);)

code snippet:

function initialize_property_map() {

  var propertyMarkerInfo = {
    lat: 42.345573,
    lang: -71.098326,
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  };

  var url = propertyMarkerInfo.icon;
  var size = new google.maps.Size(42, 57);

  var image = {
    url: url,
    size: size,
    scaledSize: new google.maps.Size(42, 57),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(21, 56)
  };

  var propertyLocation = new google.maps.LatLng(propertyMarkerInfo.lat, propertyMarkerInfo.lang);
  var propertyMapOptions = {
    center: propertyLocation,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  };
  var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions);
  var propertyMarker = new google.maps.Marker({
    position: propertyLocation,
    map: propertyMap,
    icon: image
  });
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: propertyLocation,
      pov: {
        heading: 34,
        pitch: 10
      }
    });
  propertyMap.setStreetView(panorama);

}

window.onload = initialize_property_map;
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#property_map {
  height: 100%;
  width: 50%;
  float: left;
}
#pano {
  height: 100%;
  width: 50%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="property_map"></div>
<div id="pano"></div>