Linked Maps in GVH

Permanently deleted user

October 21, 2015 21:03

You actually have to configure this in Desktop.Json.Js. Download the Google Street view example and it will walk you through it.

0

Permanently deleted user

October 26, 2015 06:24

Thank you Zarani for the prompt contribution,

May you please drop me the link for the Google Street View Example?

0

Permanently deleted user

October 26, 2015 16:14

Hi Hani,

You can find the Google Street View example in the Code Gallery at the follwing link:

https://support.geocortex.com/essentialsGSCCodeGallery?sub-nav=codegall&main-nav=essentials&#!/feedtype=SINGLE_ARTICLE_DETAIL&dc=Geocortex_Essentials_cg&criteria=BESTANSWERS&id=kA460000000blX2

Thanks,

Cody

0

Permanently deleted user

December 11, 2015 23:25

FYI. For google maps (not just street view), create a copy of the bingMap.html (the one that comes with the HTML5 viewer not the silverlight) and rename to googleMaps.html and then replace the script tag and contents with:

<script type="text/javascript">

        var map;
        var currentZoom = 10;
        var isReady = false;
		
        var thirdPartyMap = new geocortex.essentialsHtmlViewer.integration.ThirdPartyMap("googleMaps",
            initMap,
            getMapViewpointParams,
            handleViewerPositionUpdatedEvent,
            handleViewpointIndicatorUpdatedEvent);

        /**
         * Initializes the Google map.
         */

        function initMap() {
	    var location = new google.maps.LatLng({lat: 0, lng: 0});
            var mapOptions = {
                center: location,
                zoom: currentZoom,
		        MapTypeControl: true,
		        streetViewControl: true,
                rotateControl: true
            };

            map = new google.maps.Map(document.getElementById("map-container"), mapOptions);
        }

        /**
         * Gets the current position of the Google map.
         */

        function getMapViewpointParams() {
            var pos = map.getCenter();
            var scale = thirdPartyMap.zoomLevelToScale(map.getZoom());

            return {
                center: {
                    x: pos.lng(),
                    y: pos.lat()
                },
                scale: scale,
                heading: map.getHeading()
            };
        }

        /**
         * Updates the Google map to match the viewer.
         */

        function handleViewerPositionUpdatedEvent(arg) {
            if (!isReady) {
                //Add handlers after we have received our first position
		map.addListener('center_changed', function() {
		    thirdPartyMap.handleViewpointChanged();
		});
                isReady = true;
            }

        currentZoom = thirdPartyMap.scaleToZoomLevel(arg.scale);
	 	map.setCenter(new google.maps.LatLng({lat: arg.position.y, lng: arg.position.x}) );
	 	map.setZoom(currentZoom);
        }

        /**
         * Updates the Google map to match the viewpoint indicator position.
         */
 
        function handleViewpointIndicatorUpdatedEvent(arg) {
	        map.setCenter(new google.maps.LatLng({lat: arg.y, lng: arg.x}) );
        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>

Then just be sure to replace the "YOUR_GOOGLE_API_KEY" with your key and then update your desktop.json.js "externalComponents" to include:

{
                  "id": "googleMaps",
                  "displayName": "Google Maps™",
                  "uri": "Resources/3rdPartyMaps/googleMaps.html",
                  "viewpointIndicatorUri": "Resources/Images/Icons/location-direction-blue-32.png"
                }

0

Permanently deleted user

December 13, 2015 12:03

Thanks for the useful input Oyaide,

I followed your steps, but still Google Maps is not working, I get a blank map.

_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000XaZY&feoid=Body&refid=0EM60000000XqkW" _/_img_

0

Permanently deleted user

December 14, 2015 18:52

Have you checked the developer tools in your browser to see if it gives any errors when you open the google map? Also, make sure the id is different from the Google Street View ID.

The ID would have to change in two places if they are the same. In the Desktop.Json.js and in the .html file at the:

geocortex.essentialsHtmlViewer.integration.ThirdPartyMap("googleMaps",

0

Permanently deleted user

December 15, 2015 18:35

It worked now,

Seems that I made some mistakes when modifying the code.

Thanks a lot Oridi

0

Permanently deleted user

May 16, 2016 22:46

Does Google Street view intergration code you deployed support synchronization in GVH 2.6?

0

Linked Maps in GVH

Comments

Didn't find what you were looking for?