javascripthtmlgoogle-mapsgoogle-maps-api-3google-street-view

Tag place types in google map street-view api

I'm new to Google Maps API and using streetview.

I want to display the tag in each place in streetview the once I screenshot.

(see there is orange and blue tag eg. restaurant, cafe, clothing store)

as per Mr. Upsidedown, added working API key which is free for use on Stack overflow.

enter image description here

I was able to pin some places type using the Places API and it pin on maps but did not pin on streetview.

var map;

function createMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 42.345573, lng: -71.098326 },
    zoom: 20
  });

  var request = {
    location: map.getCenter(),
    radius: 8047,
    types: ['cafe']
  }

  var service = new google.maps.places.PlacesService(map);

  service.nearbySearch(request, callback);
  
  const panorama = new google.maps.StreetViewPanorama(
        document.getElementById("pano"),
        {
            position: map.getCenter(),
            pov: {
                heading: 34,
                pitch: 10,
            },
        }
    );
    map.setStreetView(panorama);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    console.log(results.length);
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name
  })
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}
<div id="map"></div>
<div id="pano"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=createMap" async defer></script>

Solution

  • If you need the markers to be visible on both the map and on Street View, just create the markers on map and panorama.

    See my comments in the code. I also modified the center point and pano heading so that a Marker is in view when loaded.

    var map;
var panorama; // Added this so that panorama is in global scope

function createMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 42.344268, lng: -71.101617 },
    zoom: 20
  });

  var request = {
    location: map.getCenter(),
    radius: 8047,
    types: ['cafe']
  }

  var service = new google.maps.places.PlacesService(map);

  service.nearbySearch(request, callback);
  
  panorama = new google.maps.StreetViewPanorama(
        document.getElementById("pano"),
        {
            position: map.getCenter(),
            pov: {
                heading: 65,
                pitch: 10,
            },
        }
    );
    map.setStreetView(panorama);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    console.log(results.length);
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name
  });
  
  // added this to also add the Marker on panorama
  var marker_pano = new google.maps.Marker({
    map: panorama,
    position: place.geometry.location,
    title: place.name
  });
}
    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}
    <div id="map"></div>
<div id="pano"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=createMap" async defer></script>