Google map floor plan overlay in setting user data

Q&A about the latest versions
Post Reply
calzie
Posts: 26
Joined: Wed Nov 24, 2010 12:33 pm

Hi there

I am in the middle of laying out a large panorama tour using 4.0 pro, this tour will contain 60+ panoramas and I am looking to use the User Data, coordinates function to set the latitude/longitude and north, this will make the whole process of linking panoramas much easier, and is the reason I upgraded to the pro version.
I have floor plans for the building and I can overlay these onto the building in Google Earth, but Pano2VR uses Google Maps which does not have this feature.

Basically I need the User Data coordinates button to show the just the floor plan (or the floor plan overlayed on top of the Google Map), then I can click where the panorama was taken and set 'North' using landmark on the floor plan. When complete all the panoramas within in the floor plan area will know and link to each other as normally happens with a outside tour.

I am sure people who do internal tours must have already ran into this problem.

Any help/suggestions/advice would be greatly welcomed.

Many thanks for the great work

Callum
User avatar
zap
Posts: 391
Joined: Thu May 29, 2008 12:13 pm
Contact:

Everything is possible in IT but
I personally believe that if you're using 60+ panoramas, linking them all together works in Pano2VR but you would be better off with an alternative solution.
e.g. Kind of an individual webpage which is loaded clientside as an iframe.

just my 50ct
ZY
360 Panorama Creators http://luxmap.com
Google Trusted Photographer
calzie
Posts: 26
Joined: Wed Nov 24, 2010 12:33 pm

Hi again

Hmm, would it be possible at add another option to the 'Settings->Images->Map Images Provider' for 'Static User Map', which would allow a user selected image to be used instead of the external web maps. The x/y centre of the rectangular image could be set as latitude/longitude 0/0 and North set as straight up. Then all panoramas on the floor plan can be placed relative to the 0/0 point and thus each other, and the North set using the Pick Landmark as normal.

Could this be added as a future request.

Thanks

Callum
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

calzie wrote:...allow a user selected image to be used instead of the external web maps...
Callum, regarding floor plans instead of maps, if you are outputting to Flash, then have you tried, or considered, loading a FLAT image as one of the nodes on your tour? Then place 60 node markers on that flat node. HTML output does not yet load flat images, but the request is on the Pano2VR roadmap.

http://gardengnomesoftware.com/bt/roadm ... oject_id=1

Meanwhile, the Universal Studios Back Lot is a good example mentioned in past topics on this forum, i.e. place a key map, site plan, or floor plan as an image on your skin with a skin button to turn the image on/off.

Don
Last edited by Don on Wed Mar 27, 2013 10:28 pm, edited 1 time in total.
calzie
Posts: 26
Joined: Wed Nov 24, 2010 12:33 pm

Hi there

Thank for the replies, but I think perhaps I have not made myself clear, I don't want to use the maps for end user navigation, but to help me coordinated/align/link the panoramas when building the tour.

For example the 4.0 pro 'Building a Tour' tutorial http://gardengnomesoftware.com/tutorial.php?movid=19_1
shows at 2:45 that the user can open the 'User Data', 'Coordinates' zoom into the map and right click where this panorama was taken, then set north using a landmark, this is repeated for each of the panoramas in the tutorial tour. Now at the 4:45 mark in the video tutorial the 'Hotspots' window is open for the first panorama, and automatically hotspot links are already there leading to the other panoramas, in the correct directions.

This the type of functionality I would like to have available for user static floor plans, as I said in the last post an option not to use external web maps but a static user map image would allow this to be achieved.

Thanks and regards

Callum
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Thanks for the clarification Callum. I understand now. Great idea, and something I will be interested in investigating in the next week or two. Until I do, have you seen this video clip starting at 4:07 where it mentions using map sources other than Google Maps?

http://gardengnomesoftware.com/wiki/Pan ... ML5_output

I'm thinking along the lines of exporting from Google Earth to create your own custom map (which happens to be a floor plan instead of a map) and then use that exported map to become your own "other map source" in Pano2VR...just a thought.

Don
Last edited by Don on Wed Mar 27, 2013 10:28 pm, edited 1 time in total.
calzie
Posts: 26
Joined: Wed Nov 24, 2010 12:33 pm

Hi there

I have been playing around with this, trying loads of ideas, but the best solution (I think) would be to add an option for 'use static map image' into the 'Map Images Provider' setting.

However I have got close using a KML file to force the overlay onto Google Maps, using this method:

1. Open Google Earth and zoom into the location
2. Click on the 'Add image overlay' button on the tool bar and load the image (jpg, png, tif etc)
3. Using the image controls, align and rotate image to match Google Earth's view
4. Save it as a KML file (right mouse click on the 'Image Overlay' name in the 'My Places' section.

You should end up with a file like this:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<GroundOverlay>
	<name>Untitled Image Overlay</name>
	<Icon>
		<href>C:/Users/Me/Pictures/servo10v.gif</href>
		<viewBoundScale>0.75</viewBoundScale>
	</Icon>
	<LatLonBox>
		<north>55.98421405984381</north>
		<south>55.98325070889779</south>
		<east>-3.381046459433788</east>
		<west>-3.383443670777923</west>
	</LatLonBox>
</GroundOverlay>
</kml>
5. Upload both the image used and the KML file to a server (I am testing with dropbox)
6. Edit the KML file to point to the image file, it will be set to your local drive at first, change it to the dropbox public URL of the image file:

Code: Select all

was
<href>C:/Users/Me/Pictures/servo10v.gif</href>
to
<href>https://dl.dropbox.com/u/7525919/servo10v.gif</href>
7. Open Google Maps in a browser and in the search box put in the dropbox public URL for the KML file, my test file (which you can try is)

Code: Select all

https://dl.dropbox.com/u/7525919/calTest1.kml
8. Click the search button and whoo hoooo, Google Maps goes to the location and puts the overlay image on top :o)

So it can be done, EXCEPT :o(

Searching for the KML file using the same URL in Pano2VR 'Address' box on the 'User Data/Coordinates' window just returns
'The address you entered could not be found!'

If any of the admins/developers read this, can you enable searching for KML files, or is there something else causing the problem?

Or can we have static users supplied map image support.

Again, I really want to use this for the design/building/layout of the tour, not for the public user.

Thanks

Callum
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Callum, see "Ground Overlays" and "Custom Overlays" in the Google Maps API documentation:

https://developers.google.com/maps/docu ... ysOverview

If you have already included a Google Map in your tour, and published the output, then you will recognize much of the Google Map example code already in your tour's HTML file, and then add-on the missing pieces of code as needed. Time permitting, I hope to give it a try tomorrow.

Don
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

This works for me. From the West Mersea Google Map example I clicked on "Download the Project":
http://gardengnomesoftware.com/wiki/Pan ... ML5_output

2. In Google Maps I looked up West Mersea for the coordinates of the upper-right corner and lower-left corner of the rectangle that would become my site plan overlay. (Hint: right-click anywhere in Google Maps, select "What's here" and the latitude and longitude will display.)

3. A photoshopped screenshot in Google Maps became my quickie "site_plan.jpg":
site_plan.jpg
site_plan.jpg (34.42 KiB) Viewed 8062 times
4. Find this line of javascript in the HTML page:
map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);

5. And immediately underneath it, enter this code to overlay the "site_plan.jpg" on top of the Google Map:

Code: Select all

var swBound = new google.maps.LatLng(51.773763, 0.932290);
var neBound = new google.maps.LatLng(51.773936, 0.932576);
var imageBounds = new google.maps.LatLngBounds(swBound, neBound);

var srcImage = 'site_plan.jpg';

var myMapOverlay = new google.maps.GroundOverlay(srcImage, imageBounds);
myMapOverlay.setMap(map);
6. Here is a screenshot of the result:
Screenshot.jpg
Screenshot.jpg (93.28 KiB) Viewed 8062 times
calzie
Posts: 26
Joined: Wed Nov 24, 2010 12:33 pm

Hi Don

Thank you for you reply, and your work, this does indeed work and allow an image/plan to be over laid on the Google map that the end users could view whilst viewing the tour.

But what I need is for this image/plan to be available to me when building the tour, inside Pano2VR, this needs either the option of using a static image as a map (in the settings, images, map images provider option) or being able to use kml files in Google maps inside Pano2VR.

This would seem like a great additional functionality to a great bit of software, internal building tours are becoming more popular and being able to use a floor plan in Pano2VR when building the tour would dramatically reduce the hotspot linking workload.

I have not heard anything from the developers and can't find a feature request topic.

Thanks Callum
KHarrison
Posts: 5
Joined: Tue Sep 22, 2015 1:45 pm

I read this feed with interest since I would like to add an overlay - but for my visitors over google maps.

So I am wondering where this would be added.

I can find the place in the skin.js to add the suitable code.

I have tried adding the code about myMapOverlay here if (mapTypeId == 'googlemap') as that seemed a sensible place.

but not found that worked.

Regards, Karl
KHarrison
Posts: 5
Joined: Tue Sep 22, 2015 1:45 pm

KHarrison wrote: Tue Mar 14, 2023 3:31 pm I read this feed with interest since I would like to add an overlay - but for my visitors over google maps.

So I am wondering where this would be added.

I can find the place in the skin.js to add the suitable code.

I have tried adding the code about myMapOverlay here if (mapTypeId == 'googlemap') as that seemed a sensible place.

but not found that worked.

Regards, Karl
Actually now solved this just needed the code to be after this line

me._map_el.ggMap = new google.maps.Map(me._map_el, mapOptions);

in skin.js

Thanks for the clues above.

Karl
Post Reply