Linked Maps in GVH;
Hi All,
I tried to integrate google maps with an HTML5 viewer and I followed the steps in the Administrator and Developer Guide manual, but still Google Maps is not working, I get a blank map as shown in the below screenshot:
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90660000000PDk5&feoid=Body&refid=0EM60000000HSrG" _/_img_
I changed the code in the following files:
1. Desktop.json.js (Directory: C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\Default\REST Elements\Sites\xxxxx\Viewers\x\VirtualDirectory\Resources\Config\Default)
"externalComponents": [
{
"id": "googleMaps",
"displayName": "Google Maps",
"uri": "Resources/3rdPartyMaps/GoogleMaps.html",
"viewpointIndicatorUri": "Resources/Images/Icons/location-direction-blue-32.png"
}
2. GoogleMaps.html (Directory: C:\inetpub\wwwroot\x\Resources\3rdPartyMaps)
<!DOCTYPE html>
<html>
<head>
<title>Bing Maps</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="3rdParty.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="../Scripts/Bridge.js"></script>
<script src="ThirdPartyMap.js"></script>
<script type="text/javascript">
var bingApiKey = "";
var map;
var currentZoom = 10;
var isReady = false;
var thirdPartyMap = new geocortex.essentialsHtmlViewer.integration.ThirdPartyMap("googleMaps",
initializeMap,
getMapViewpointParams,
handleViewerPositionUpdatedEvent,
handleViewpointIndicatorUpdatedEvent);
/**
* Initializes the google map.
*/
function initializeMap() {
var location = new google.maps.LatLng({lat: 0, lng: 0});
var mapOptions = {
//credentials: bingApiKey,
center: location,
// mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: currentZoom,
MapTypeControl: true,
streetViewControl: true,
rotateControl: true
// enableSearchLogo: false,
// showDashboard: true
};
map = new google.maps.Map(document.getElementById("map-container"), mapOptions);
}
/**
* Gets the current position of the Bing 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 Bing map to match the viewer.
*/
function handleViewerPositionUpdatedEvent(arg) {
if (!isReady) {
// Add handlers after we have received our first position
// Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () {
// thirdPartyMap.handleViewpointChanged();
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);
// map.setView({ zoom: currentZoom, center: new Microsoft.Maps.Location(arg.position.y, arg.position.x) });
}
/**
* Updates the Bing map to match the viewpoint indicator position.
*/
function handleViewpointIndicatorUpdatedEvent(arg) {
map.setCenter(new google.maps.LatLng({lat: arg.y, lng: arg.x}) );
//map.setView({ center: new Microsoft.Maps.Location(arg.y, arg.x), animate: false });
}
</script>
</head>
<body>
<ul class="integration-panel-actions">
<li class="panel-action-button">
<button class="viewpoint-indicator viewpoint-indicator-bing" title="Viewpoint Indicator"></button>
</li>
<li class="panel-action-button">
<button id="centerButton" class="center-map" title="Center this map to the viewer"></button>
</li>
<li class="panel-action-button">
<button id="syncButton" class="sync-toggle-off" title="Synchronize Maps"></button>
</li>
<li class="panel-action-button">
<button id="dockButton" class="window-popout" title="Open in new window"></button>
</li>
<li class="panel-action-button">
<button id="closeButton" class="window-close" title="Close this map view"></button>
</li>
</ul>
<div id="map-container" class="map-container"></div>
</body>
</html>
What might be the issue here?
Thanks in advance,
Lubna
0
-
It's hard to tell with all the Bing map stuff commented out. Did you include the extra script tag with your google API key?
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>0 -
Hi Odiri,
I didn’t add this extra script. What did you mean in your google API key?
Best,
Lubna0 -
You need to add that line for the google map to work. A Google API Key is free to get. Here's a link that better explains it:
https://developers.google.com/maps/documentation/javascript/get-api-key0 -
Also, I may have misunderstood you before, but in that script tag, there's a part that says "key=YOUR_GOOGLE_API_KEY". You'll have to replace the "YOUR_GOOGLE_API_KEY" with the api key that you receive from google. 0 -
I wonder why it is not as simple as what we have in GVS? The linked maps appear straightaway
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDPq&feoid=Body&refid=0EM60000000HT74" _/_img_0 -
Hi Odiri
I replaced the "YOUR_GOOGLE_API_KEY" with the api key that I received from google, but I still have the same problem.
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDS6&feoid=Body&refid=0EM60000000HT8l" _/_img_
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDS6&feoid=Body&refid=0EM60000000HT8q" _/_img_
Best,
Lubna0 -
Hello Lubna,
It appears you may be mixing the bing maps code with google maps code. From the image/code above, you're trying to trying to pull google data from a bing url: http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0
Below is the code I use. I built it off of the Streetview code (in code gallery 'Google Street View Integration') as opposed to the bingmaps code. You can view a working example at (http://https:gis.miottawa.org/ottawa/geocortex/propertymapping) https:gis.miottawa.org/ottawa/geocortex/propertymapping under the external maps tab.<!DOCTYPE html> <html> <head> <title>Google Maps</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link href="3rdParty.css" rel="stylesheet" type="text/css" /> <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={YOUR_GOOGLE_API_KEY_HERE}"></script> <script src="../Scripts/Bridge.js"></script> <script src="ThirdPartyMap.js"></script> <script type="text/javascript"> /* * jQuery throttle / debounce - v1.1 - 3/7/2010 * http://benalman.com/projects/jquery-throttle-debounce-plugin/ * Copyright (c) 2010 "Cowboy" Ben Alman * Dual licensed under the MIT and GPL licenses. * http://benalman.com/about/license/ */ (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this); </script> <script type="text/javascript"> var map; var currentZoom = 10; var isReady = false; var thirdPartyMap = new geocortex.essentialsHtmlViewer.integration.ThirdPartyMap("googleMapsAerial", initializeMap, getMapViewpointParams, handleViewerPositionUpdatedEvent, handleViewpointIndicatorUpdatedEvent); /** * Initializes the google map. */ function initializeMap() { var mapOptions = { zoom: currentZoom, mapTypeId: google.maps.MapTypeId.HYBRID }; 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 }; } /** * Updates the google map to match the viewer. */ function handleViewerPositionUpdatedEvent(arg) { if (!isReady) { // Add handlers after we have received our first position google.maps.event.addListener(map,'bounds_changed', function() { thirdPartyMap.handleViewpointChanged(); }); isReady = true; } currentZoom = thirdPartyMap.scaleToZoomLevel(arg.scale); var ltlng = new google.maps.LatLng( arg.position.y,arg.position.x) map.setCenter(ltlng); map.setZoom(currentZoom); } /** * Updates the google map to match the viewpoint indicator position. */ function handleViewpointIndicatorUpdatedEvent(arg) { var ltlng = new google.maps.LatLng(arg.y,arg.x) map.setCenter(ltlng); } </script> </head> <body> <ul class="integration-panel-actions"> <li class="panel-action-button"> <button class="viewpoint-indicator viewpoint-indicator-bing" title="Viewpoint Indicator"></button> </li> <li class="panel-action-button"> <button id="centerButton" class="center-map" title="Center this map to the viewer"></button> </li> <li class="panel-action-button"> <button id="syncButton" class="sync-toggle-off" title="Synchronize Maps"></button> </li> <li class="panel-action-button"> <button id="dockButton" class="window-popout" title="Open in new window"></button> </li> <li class="panel-action-button"> <button id="closeButton" class="window-close" title="Close this map view"></button> </li> </ul> <div id="map-container" class="map-container"></div> </body> </html>
Hope this helps,
Marshall0 -
Hey Lubna,
You put the Google API Key in the variable, which like Marshall said above, is from the Bing code. In the Google Maps Version, there is no variable for the key and therefore, where you put your key actually does nothing. Like I said before, you will have to place your Google API Key in the new script tag that I posted earlier, which is outside of your script tags with all your code.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>async defer></script>
Marshall's code above has the same script tag if you would like an example, but your code should work if you add this properly.0 -
Hi again,
Thank you for your help,
I just copy the code form marchall and changed the API key but it still not working with me. Could be the error from the api key?
I am from the middle east, so I created my project with Europe-west app engine region, this is could be the reason
Kindly find the below screenshots and the code:
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDUC&feoid=Body&refid=0EM60000000HTC9" _/_img_
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDUC&feoid=Body&refid=0EM60000000HTCE" _/_img_<!DOCTYPE html> <html> <head> <title>Google Maps</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link href="3rdParty.css" rel="stylesheet" type="text/css" /> <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBkP23lKSYOQaKh485NHpj2LwAZbxdXLkQ"></script> <script src="../Scripts/Bridge.js"></script> <script src="ThirdPartyMap.js"></script> <script type="text/javascript"> /* * jQuery throttle / debounce - v1.1 - 3/7/2010 * http://benalman.com/projects/jquery-throttle-debounce-plugin/ * Copyright (c) 2010 "Cowboy" Ben Alman * Dual licensed under the MIT and GPL licenses. * http://benalman.com/about/license/ */ (function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this); </script> <script type="text/javascript"> var map; var currentZoom = 10; var isReady = false; var thirdPartyMap = new geocortex.essentialsHtmlViewer.integration.ThirdPartyMap("googleMapsAerial", initializeMap, getMapViewpointParams, handleViewerPositionUpdatedEvent, handleViewpointIndicatorUpdatedEvent); /** * Initializes the google map. */ function initializeMap() { var mapOptions = { zoom: currentZoom, mapTypeId: google.maps.MapTypeId.HYBRID }; 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 }; } /** * Updates the google map to match the viewer. */ function handleViewerPositionUpdatedEvent(arg) { if (!isReady) { // Add handlers after we have received our first position google.maps.event.addListener(map,'bounds_changed', function() { thirdPartyMap.handleViewpointChanged(); }); isReady = true; } currentZoom = thirdPartyMap.scaleToZoomLevel(arg.scale); var ltlng = new google.maps.LatLng( arg.position.y,arg.position.x) map.setCenter(ltlng); map.setZoom(currentZoom); } /** * Updates the google map to match the viewpoint indicator position. */ function handleViewpointIndicatorUpdatedEvent(arg) { var ltlng = new google.maps.LatLng(arg.y,arg.x) map.setCenter(ltlng); } </script> </head> <body> <ul class="integration-panel-actions"> <li class="panel-action-button"> <button class="viewpoint-indicator viewpoint-indicator-bing" title="Viewpoint Indicator"></button> </li> <li class="panel-action-button"> <button id="centerButton" class="center-map" title="Center this map to the viewer"></button> </li> <li class="panel-action-button"> <button id="syncButton" class="sync-toggle-off" title="Synchronize Maps"></button> </li> <li class="panel-action-button"> <button id="dockButton" class="window-popout" title="Open in new window"></button> </li> <li class="panel-action-button"> <button id="closeButton" class="window-close" title="Close this map view"></button> </li> </ul> <div id="map-container" class="map-container"></div> </body> </html>
Thanks in advance,
Best,
Lubna0 -
I'm assuming is it something to do with your api key. I used your key and got the same screen as you. Using the recommendation to view the javascript console, the error I recieved was
"Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: https://gis.miottawa.org/Ottawa/Geocortex/GE451/html5/Resources/3rdPartyMaps/GoogleMapsAerial.html"Which is a good thing, that means no one else can use your api key from a different domain, only you can host it. You can open the console in most browsers by pressing ctrl+shift+j together or in the developer options in the menu tools.
If it is the same error, you'll need to set up your api key to allow the domain geo.molg.pna.ps as a referrer. If not, post a screen shot of the error and I'll take a look.
By the way, I didn't update my code to match your 3rd party map id. In my code the googlemaps id is 'googleMapsAerial' and in yours it is just 'googleMaps'. Just making sure all bases are covered.0 -
Hi Marshall,
I still have the problem after setting up the API key to allow our web site as a referrer. Kindly find the below screenshots that described what I did:
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDW8&feoid=Body&refid=0EM60000000HTD7" _/_img_
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDW8&feoid=Body&refid=0EM60000000HTDC" _/_img_
Please note that somtimes the google map appears for a second then returns the above error "something went wrong" as shown below:
_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDW8&feoid=Body&refid=0EM60000000HTD2" _/_img_
Best,
Lubna0 -
Lubna,
The only other thing I would try would be to remove all restrictions from your API Key and see if it loads.
If it does, then I try changing your allowed referrer from 'http://geo.molg.pna.ps/' to '*.geo.molg.pna.ps/*' so that both http and https can be used as well as any sub directory of geo.molg.pna.ps can be used as well.
If that still isn't working, I would suggest filing a support ticket with Latitude and/or Google to see why you are getting blocked.
Sorry for the troubles, hope this helps.
Marshall0 -
Hi Marshall,
Thank you for your help,
I removed all restrictions from my API key and I enabled Google Maps JavaScript API, then the issue is solved.
best,
Lubna0 -
Hi All
What about the edits needed on the handheld.josn file, google map is not working on the handheld.
Best
Majdoleen0 -
Hi Majdoleen,
"The Handheld user interface does not support integration." The reference document is here (https://docs.geocortex.com/essentials/gvh/latest/admin-help/Default.htm#gvh/admin/modules/integration-module.htm#Integration_Module%3FTocPath%3DModules%7CIntegration%2520Module%7C_____0) .
Thanks
Long0 -
Hi all,
Has anyone implemented Marshall's Google Map integration in e4.10 gvh2.11?
I just upgraded our sandbox and it is not working.
Works great on our production sites (e4.7.1 gvh2.8.2)
Thanks,Dave
0 -
Hi Dave,
With the recent changes to Google Maps accounts, you will likely want to restrict your API key's usage given that it is no longer free. See this post for more information: https://support.geocortex.com/essentialsGSCkba?sub-nav=kba&main-nav=essentials&#!/feedtype=SINGLE_ARTICLE_DETAIL&dc=All_Essentials_kba&criteria=BESTANSWERS&id=kA3f2000000k9cB
If you hadn't previously configured your API key into GVH, you'll need to append it to the configured URL in GoogleMaps.html, as described here: https://support.geocortex.com/essentialsGSCCodeGallery?sub-nav=codegall&main-nav=essentials&id=kA460000000blX2CAI
Thanks, Stefan0 -
Hi Stefan,
I'll look into restricting the key,
The key is properly appended to the url in GoogleMaps.html.
Only change from it working in production to not in sandbox is the upgrade.
Cheers,
Dave0
Please sign in to leave a comment.
Comments
18 comments