Yahoo Maps API - Same code ok in Firefox, not IE7 - asp.net

I've implemented a simple yahoo mapping example using JQUERY.
My problem is i'm developing using my localhost, my intended target platform is to be within an Intranet environment. My thinking is that my localhost will to some extent mimic this.
I have an update, made some progress. See the code snippet below, all ok in Firefox but in IE (my target browser) it fails on the line:
var currentGeoPoint = new YGeoPoint($('#txtLatitude').val(), $('#txtLongitude').val());
What I cannot understand is why will IE allow the MAP API Code to run and manipulate the MAP object and fail on this one line.
Could this all be to do with Tools/Intranet Options/Security and trusted sites etc? My URL locally is "http://localhost:4724/LMS/Site.mvc/Details/77" if thats any help.
$(document).ready(function() {
jQuery("textarea[class*=expand]").TextAreaExpander(); // initialize all expanding textareas, new code, john s 10/08/2010
var geoPoint;
// Create a map object
var map = new YMap(document.getElementById('map'));
// Add map type control
map.addTypeControl();
// Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_REG);
// Display the map centered on a geocoded location
map.drawZoomAndCenter("United Kingdom", 12);
// Add map type control
map.addTypeControl();
// Add map zoom (long) control
map.addZoomLong();
// Add the Pan Control
map.addPanControl();
// Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_REG);
// Display the map centered on a geocoded location
map.drawZoomAndCenter("United Kingdom", 12);
var currentGeoPoint = new YGeoPoint($('#txtLatitude').val(), $('#txtLongitude').val()); // FAILS IN IE ON THIS LINE!! Unspecified Error popup dialogue box
map.addMarker(currentGeoPoint);
});
John

Have this working now, reverted back to original javascript, i'd hand rolled my own code and although neater was not working in IE. Glad to be out of the woods, cheers, J

Related

Xamarin Forms Maps Geocoder Not Working on UWP Device

My app uses Xamarin.Forms.Maps to display a map and also for geocoding. The map is displayed on a separate page when the user navigates to it from the main page. I use the geocoder to reverse geocode the current location so that I have the address. This is done from various places other than the map page.
When I run the app on a device (even in debug mode) the geocoder works right away in iOS and Android, but does not work in UWP. After I navigate to the map page and display the map, then go back to a different page to use the geocoder it starts working.
I saw a thread about the map not working with release build so I added the following code:
var laRendererAssemblies = new[] { typeof(Xamarin.Forms.Maps.UWP.MapRenderer).GetTypeInfo().Assembly };
Xamarin.Forms.Forms.Init(e, laRendererAssemblies);
//Xamarin.Forms.Forms.Init(e);
Xamarin.FormsMaps.Init("MyBingMapsKey");
This has not helped the issue with the Xamarin.Forms.Maps.Geocoder. I also tried creating an instance of Xamarin.Forms.Maps.Map in my main page, but that did not help either. Is there a way to prime the map component so that the Geocoder will work on a device? (My test device is ARM, but it happens when I run on Local
Machine (Win 10) too)
Following is a snippet of the call to the Geocoder (which works fine once the user has navigated to the Map page and back - and it works fine in iOS and Android - and as such I don't believe it is a problem with the code, but here it is):
public static async Task<Plugin.Geolocator.Abstractions.Position> Geocode(string address)
{
try
{
var loGeocoder = new Xamarin.Forms.Maps.Geocoder();
System.Diagnostics.Debug.WriteLine("Get Lat/Lon");
var lcolPositions = await loGeocoder.GetPositionsForAddressAsync(address);
if (lcolPositions != null)
After doing some research and ensuring that your geodecode class being static wouldn't mess with the async/await pattern in the UWP build. I've come across a few references to this particular problem with the built in Forms.Map geodecoder elsewhere, not just for UWP it has also been noted for android‡.
I took some time to have a look at one of our current cross-platform applications that we have in the app stores, and according to our internal documentation we switched out both the xamarin.forms map, and the geodecoder for custom ones.
The plugin that we use for our cross-platform application is the 'GelocatorPlugin' created by james montemagno, and can be found here.
It can be added to your project as a Nuget package if you prefer, and the implementation of it is very similar to the default one, so there's very little code to change. The primary benefit is that the UWP element of the geodecode plugin has been modified to take into account windows advanced tracking scenarios (details found here).
It should be a lot more stable than the one your using, once installed you simply use it like so:
Reverse Geocoding
Based on a location that is passed in, thi swill grab a list of
addresses.
UWP requires a Bing Map Key, which you can acquire by reading this
piece of documentation.
try
{
var addresses = await locator.GetAddressesForPositionAsync (position, string mapKey = null);
var address = addresses.FirstOrDefault();
if(address == null)
Console.WriteLine ("No address found for position.");
else
Console.WriteLine ("Addresss: {0} {1} {2}", address.Thoroughfare, address.Locality, address.Country);
}
catch(Exception ex)
{
Debug.WriteLine("Unable to get address: " + ex);
}
‡ Links to similar problems - Link 1, Link 2
resolved after added following lines in APP.xaml.cs (UWP project)
Xamarin.FormsMaps.Init("bingmapkey");
Windows.Services.Maps.MapService.ServiceToken = "bingmapkey";

Google Maps v3 places autocomplete shows address, but returns no place result?

I have set-up a page using Google maps places autocomplete service. Below is a screen snapshot of an address being entered into the text field (controlled) by places autocomplete (works fine)...
When I click on the only option presented by the Google drop down list, the place changed handler is invoked (as it should be) and the following code is executed to get the place result object:
var place = m_autocomplete.getPlace();
Examining the place object in the debugger reveals that only one property is defined; the name property, below is the place object as a JSON string:
{"name":"2701 Riverside Dr, Ottawa, ON K1A 0B1, Canada"}
The place object is missing all other properties (ie: no geometry, no address_components, etc) as outlined in the Google maps documentation for a PlaceResult object.
So, I added more code (to fallback) and call the geocoder service directly when the place results object was incomplete, ie:
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addr }, geocoder_callback_handler);
Where addr contained the value from the text field (confirmed via debugger); The geocoder callback function returns a status of: ZERO_RESULTS
Questions:
1 - Why does the autocomplete service present an address in the drop down list that results in an incomplete place result object?
2 - Why does the geocoder not recognize an address presented by the autocomplete service?
Any advice would be appreciated.

Google Maps from Firefox addon (without SDK)

I need to add a map in my adddon and I know how to do what I need in a "common webpage", like I did here: http://jsfiddle.net/hCymP/6/
The problem is I really don't know how to to the same in a Firefox Addon. I tryed importing the scripts with LoadSubScript and also tryed adding a chrome html with the next line:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
But nothing works. The best solution I found was to add part of the code in this file (the code of the script src) in my function, to import this file with loadSubScript, and all my function is executed but an empty div is returned.
Components.utils.import("resource://gre/modules/Services.jsm");
window.google = {};
window.google.maps = {};
window.google.maps.modules = {};
var modules = window.google.maps.modules;
var loadScriptTime = (new window.Date).getTime();
window.google.maps.__gjsload__ = function(name, text) { modules[name] = text;};
window.google.maps.Load = function(apiLoad) {
delete window.google.maps.Load;
apiLoad([0.009999999776482582,[[["https://mts0.googleapis.com/vt?lyrs=m#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=m#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#227000000"],[["https://khms0.googleapis.com/kh?v=134\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=134\u0026hl=en-US\u0026"],null,null,null,1,"134"],[["https://mts0.googleapis.com/vt?lyrs=h#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=h#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h#227000000"],[["https://mts0.googleapis.com/vt?lyrs=t#131,r#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=t#131,r#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#227000000"],null,null,[["https://cbks0.googleapis.com/cbk?","https://cbks1.googleapis.com/cbk?"]],[["https://khms0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["https://mts0.googleapis.com/vt?hl=en-US\u0026","https://mts1.googleapis.com/vt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"https://maps.gstatic.com/mapfiles/","https://csi.gstatic.com","https://maps.googleapis.com","https://maps.googleapis.com"],["https://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/11","3.13.11"],[3047554353],1.0,null,null,null,null,1,"",null,null,1,"https://khms.googleapis.com/mz?v=134\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"https://mts.googleapis.com/vt/icon"], loadScriptTime);
};
//I can't use document.write but use loadSubScript insthead
Services.scriptloader.loadSubScript("chrome://googleMaps/content/Google-Maps-V3.js", window, "utf8"); //chrome://MoWA/content/Google-Maps-V3.js", window, "utf8");
var mapContainer = window.content.document.createElement('canvas');
mapContainer.setAttribute('id', "map");
mapContainer.setAttribute('style',"width: 500px; height: 300px");
mapContainer.style.backgroundColor = "red";
var mapOptions = {
center: new window.google.maps.LatLng(latitude, longitude),
zoom: 5,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
}
var map = new window.google.maps.Map(mapContainer,mapOptions);
return mapContainer;
Can you help me? I'm developing a "Firefox for Android" addon and that's why I need to do things like *window.content.*document.createElement because document is not declared, only window and I think thats may be the problem... But I can't declare everything if I don't know what Google Maps uses.
Added: I also read that Google Maps API Team has specific code that disallows you from copying the main script locally. In particular, that code "expires" every so many hours. I'm combined part of this script: https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false because I can't execute this directly (Error: write called on an object that does not implement interface HTMLDocument). So I don't have any alternative!
Use an iframe (type=content if in XUL) to display web content. There you can include whatever scripts you like. The content in the iframe will not have any special privileges, or at least should not. If you need to communicate with the privileged add-on part of your code, you can use e.g. regular HTML events (createEvent, addEventListener and friends) or the postMessage web API to pass messages.
Do not try to load remote code directly into other pages, or worse, into the browser, as this is a compatibility and security nightmare.
Because loading remote code and/or code not properly reviewed for running in a privileged context, the platform will refuse to load such scripts from remote sources (http, etc.) via loadSubScript, etc.
Should be noted, that if you'd later like to host your add-on on addons.mozilla.org and still do include remote scripts in privileged code, your add-on will be rejected until you fix it.
Also, mozilla might blocklist your add-on even if you host elsewhere if it is discovered that there are known security vulnerabilities in your add-on, per the Add-on Guidelines.

Google map how to display a dragable marker based on coordinates and return new coordinates

I have to write a script for Google Maps V3 which will do the following:
Place a marker on a map based on a set of coordinates and possbibly change the address after the page has been loaded
Allow the user the drag the mark to replace it elsewhere
Collect the new coordinates once the marker has been moved.
The first part is basic enough and should be fine, changing the address after the page is loaded should only be a matter of calling back the same function?
I am not sure where to start on the draggable marker and collecting hew coordinates.
Would anyone know of scripts / API's or where in the doc should I start?
Have you checked the Google Maps Javascript API V3 Reference to see whether the google.maps.Marker class has :
a draggable option
an dragend event
a getPosition method
Hint: The answer might just be "yes" to all three, and you don't need much else to solve your problem.

Google Maps API v3 Google Earth API integration - load Earth view on load

I'm using the google-maps-utility-library-v3 to incorporate a Google Earth API view to a Google Maps API v3 implementation. Those Google Maps API v3 / Earth API utilities have been written by user jlivni as far as I can tell, the availability of which code has helped me greatly thus far.
(very rough working prototype of my implementation is here)
The problem I have is that I want to default (on page load) to the Google Earth view, rather than (as in the prototype above) one of the Maps API v3 standard views.
I have looked at lines 81, 131 and 133 of the (uncompiled?) googleearth.js at the above link (under src) and tried the following when setting the Maps API options within my JourneyImmersionInitialiseMapLoadGPXAnimate.js ...
var myOptions = {
zoom: 18,
center: arr_lat_lon[currentTrk][currentTrkseg][0],
scaleControl: true,
tilt: 45,
mapTypeId: earthMapType,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
... but get ...
ReferenceError: earthMapType is not defined
Additionally I've tried ...
mapTypeId: GoogleEarth.earthMapType,
... which results in a grey map canvas with no map type options on the top right. Once I've selected the Earth view from the page I can then change between the standard Earth API map types at the console in Firebug using ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_EARTH)
... or ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_SKY)
... but again, use of earthMapType or GoogleEarth.earthMapType in place of the last element results in an error at the Firebug console, this time ...
Error: Error calling method on NPObject!
Any help would be greatly appreciated.
Thanks in advance
(as I'm a newbie I can't provide more than two links in this post but wanted to add that I have looked at stackoverflow.com/questions/3039250/google-earth-integrated-with-google-maps-api-v3)
This library doesn't have a public method to switch programmatically, and if you try to do it before all the setup is in place, it will fail. Ideally there would be a callback after instantiating your GoogleEarth object, but lacking that you can hack around the issue by using the private showEarth_() method on the uncompiled JS.
Noting you have to wait an arbitrary amount of time before the plugin is ready, something like this should generally do the trick:
googleEarth = new GoogleEarth(map);
setTimeout('googleEarth.showEarth_();',1000);
This is all pretty hackish, so please file a feature request on the issue tracker to add in a supported method for switching to the Earth type programmatically.

Resources