Webmapviewer not displaying outside of debug build (Work Around Added)

Has anyone gotten the APIKey of the weblocation to work. I’m using the following code in a timer that fires shortly after the page is loaded however i get "Google Maps API warning: NoApiKeys " on the first page of my application even though it does not have a webmapviewer. When I go to the page that does have the map I still get the same error its like my API key is ignored. Odd part is that my google developer dashboard is tracking each time the key is used, but all I see on my app is a blank space. Anyone able to point me in the right direction?

[code] dim loc as new WebMapLocation
loc.APIKey=“MYKEY”
loc.Address=“THE ADDRESS”

	MapViewer1.GoToLocation loc
	MapViewer1.AddLocation loc

[/code]

Is anyone using the webmapviewer control in a live application?

You might want to review https://forum.xojo.com/25685-webmaplocation-api

I built a simple project that only has a mapview and a button on it in debug mode it runs fine… Once built as a standalone for linux 32 and uploaded to the server you get a javascript error see http://training.crosswindvoip.net:8070 I’ll be opening a bug ticket shortly and attached this project sample.

Don’t file a bug report for that, read the error log.

You forgot your API key.
https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

Screenshot of the error log:

Hm, I skipped the part where you have your API key in the code.
Dunno, ignore me.

This happens even if I just make a simple web project with a mapviewer object on a page leave the default latitude and longitude on the map viewer, compile and upload. Yet it runs find in debug mode its like something gets broked in the compiling process.

It seems like I need to put the APIKey on the mapviewer and not just a webmaplocation where do I do that.

That’s what I was looking into, but according to the documentation there is nowhere to.

I just compiled and uploaded the example web map viewer project that comes with xojo get same error. I think what is happening is its going to the default cords and because there is no place to put an API key it then it bugs out, and you cannot use it from that point forward. I can’t believe I’m the first to run into this issue there has to be a solution.

I have filed a bug report 46440

My ticket is still under review, so I had to come up with a plan B. I added a HTMLViewer to my project and then did the following

[code] dim html as string
dim apikey as string=“YOUR GOOGLE API KEY GOES HERE”
dim webloc as new WebMapLocation
webloc.APIKey=apikey
webloc.Address=“ADDRESS TO LOOK UP”

	html="<html>"_
	+"<head>"_
	+"<title>Simple Map</title>"_
	+"<meta name="+chr(34)+"viewport"+chr(34)+" content="+chr(34)+"initial-scale=1.0"+chr(34)+">"_
	+"<meta charset=""utf-8"">"_
	+"<style>"_
	+"/* Always set the map height explicitly to define the size of the div"_
	+"* element that contains the map. */"_
	+"#map {"_
	+"height: 100%;"_
	+"}"_
	+"/* Optional: Makes the sample page fill the window. */"_
	+"html, body {"_
	+"        height: 100%;"_
	+"        margin: 0;"_
	+"        padding: 0;"_
	+"      }"_
	+"</style>"_
	+"</head>"_
	+"<body>"_
	+"<div id=""map""></div>"_
	+"<script>"_
	+"      var map;"_
	+"function initMap() {"_
	+"        var map = new google.maps.Map(document.getElementById('map'), {"_
	+"          center: {lat: "+str(webloc.Latitude)+", lng: "+str(webloc.Longitude)+"},"_
	+"          zoom: 18,"_
	+"          mapTypeId: 'satellite'"_ 
	+"        });"_
	+"        var marker = new google.maps.Marker({"_
	+"           position: {lat: "+str(webloc.Latitude)+", lng: "+str(webloc.Longitude)+"},"_
	+"           map: map"_
	+"         });"_
	+"      }"_
	+"    </script>"_
	+"    <script src="+chr(34)+"https://maps.googleapis.com/maps/api/js?key="+apikey+"&callback=initMap"+chr(34)_
	+"    async defer></script>"_
	+"  </body>"_
	+"</html>"
	HTMLViewer1.LoadPage(html)[/code]

This is deployable and works like I had hoped the Mapviewer object would outside of debug mode on a remote server. Notice how the initMap ask for and APIKey to make it work. This is were I think the issue with the MapViewer is there is no place to put an API Key on the viewer its self. The API key works fine in the webmaplocaiton object, but its also needed in the MapViewer Object. This example is very basic but it proves to me where the problem is with the Mapviewer object built into xojo. If anyone has been able to deploy the mapviewer object in a real-world case I would love to know how you got it to work.

Wouldn’t just loading the api (again) with your key using a WCW or ExecuteJavascript be more efficient?
Or would it not work?

[quote=307175:@Tim Parnell]Wouldn’t just loading the api (again) with your key using a WCW or ExecuteJavascript be more efficient?
Or would it not work?[/quote]
No. Somewhere along the line Google also updated the API URL, so we may need to revisit the code as well.

I’ve just come across this issue too. I have been using Xojo cloud to host our application and the mapviewer works fine but I
I am currently trialling another hosting company and have come up with the same problem as above.

We had the same problem. putting WebMapLocation on timer fires error.

I’m still hoping for a solution from an expert out there.

I’m not sure if this will help or not, but I thought I’d share the very basic Xojo Web app that uses the Google Maps Javascript API to generate a map for an address: http://bit.ly/2mUJSCP

The app uses “SimpleMap,” a class that I’ve been using to generate maps for a few projects, including this site.

To use the app, you will need an API key. You can get one here. Set the value of the App.MapAPIKey property with your API key, and the app should work.

I hope it helps.

Hi Tim,

I tried your sample, initially, it fails. But after I created a new key from the reference you mentioned in your code [quote]https://developers.google.com/maps/documentation/embed/[/quote]
I finally realized that APIKEY has the distinction.

I run and deployed your sample successfully!

However, the same APIKEY was not working on XOJO MAPVIEWER. It seems that APIKEY has distinction depending on where it will be applied.

I really appreciate if you can guide us on where to get the proper API key?