2

Hi I have searched for all the web and stackoverflow.

Anyone knows how to locate a custom overlay in a specific position inside Google maps street view ?

Here are an example :

Night Walk

In this tour you can see that there are some icons and items located in specific locations .

Does anyone know how to do that ? This is amazing and I want know how to do it.

I have experience with Google maps javascript API, but I can not do this.

I solved this with this library https://github.com/marmat/google-maps-api-addons

This is the result : http://www.paneek.net/#/home

Saul Burgos
  • 594
  • 1
  • 4
  • 21

2 Answers2

1

I found this while looking how to achieve a similar thing:

I'm still looking for a solution, and I've found some nice libraries external to google services:

Indeed, using solution outside google's API has pro and cons - but this evalutation is up to you.

Strae
  • 18,807
  • 29
  • 92
  • 131
  • Actually I solved this problem months ago with this tool . https://github.com/marmat/google-maps-api-addons – Saul Burgos Apr 30 '16 at 04:58
  • @SaulBurgos its really nice! I've seen the volcano masaya tour on your site, may I ask you which library did you use in the end? Leanorama, photosphere viewer or those from teammaps? – Strae May 19 '16 at 10:33
  • I did not use any of those libraries. I just needed the library PanoMarker to create the hotspots inside my custom google streetviews. The panoramas view are create by google street view with custom streetview method. nothing more. I do not know if that answer your question. – Saul Burgos May 22 '16 at 17:40
0

I think this may be relevant: https://developers.google.com/maps/documentation/javascript/examples/streetview-overlays

It's an example of placing location markers on a street view map. It defines the location of a place first, then defines the marker, giving it properties like icon and name.

var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);

function initialize() {

  // Set up the map
  var mapOptions = {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Setup the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: cafe,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: bank,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: busStop,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);
Dan Hoang
  • 9
  • 1
  • Thanks for you answer :) , I know about that example in the google documentation but if you see in the example I wrote "Night Walk", the items are located with height . for example: located exactly in a window, if you move the scene you can see that items stay in that position. I do not know if I am clear. is not a simple marker with position , they also have height – Saul Burgos May 08 '15 at 14:40