virtual earth - Only map is not rendering - javascript

I am facing this strange issue.
The bing map does not display on my page where as all the controls even pushpins displays properly.
I googled a lot and same the functionality is working great in my other project(s)
I suspect that something is wrong with the reference to the dev.virtualearth.net, Or I am missing something
Here is my code:
ASCX (is inside the content place holder of dynamically generated aspx):
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=de-de">
</script>
<div>
.
.
.
<div id="bigMapContainer">
<div id="eventMap">
</div>
</div>
</div>
Code behind:
string script = #"
function GetVEMap() {
map = new VEMap('eventMap');
map.SetDashboardSize(VEDashboardSize.Small);
map.LoadMap();
DisplayEventsOnMap();
}
function DisplayEventsOnMap() {
var eventMapLayer = new VEShapeLayer();
eventMapLayer.Id = 'eventMapLayer';
var points = null;
.
.
.
//Code to get the data for pin display etc
.
.
map.AddShapeLayer(eventMapLayer);
map.SetMapView(eventMapLayer.GetBoundingRectangle());
map.SetZoomLevel(15);
});
}
$(window).load(function() {
GetVEMap();
}
);";
ScriptManager.RegisterStartupScript(this, typeof(Page), "MapDisplay", script, true);
CSS:
#bigMapContainer {display: block;}
#eventMap { position: absolute; width: 550px height: 500px; }
I have added some references on the master pages which are not related to the map but might conflict with my map implementation(?)
<script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.responsivemenu.js"></script>
<script type="text/javascript" src="/js/client.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
Help is very much appreciated.

First off, it looks like you are pointing to Virtual Earth 6.2 which was deprecated several years ago and now points to v6.3. That said v6.3 is really old and is not recommended for new development projects. If this is a new project you should be using Bing Maps V7 which is the latest and greatest version of Bing Maps (Virtual earth was renamed to Bing Maps in 2009). V7 is much faster, has a lot more features, and also a lot smaller.
Assuming that this is an existing project that just started having issues. Looking at your code, one thing I notice right away is that there are no credentials specified when loading the map. This is required. Right before you call the LoadMap method you should have a line of code like this:
map.SetCredentials('YOUR_BING_MAPS_KEY');
If you do not have a Bing Maps key you can get one by creating a Bing Maps account in the Bing Maps portal: http://bingmapsportal.com Here is some documentation on creating a key: http://msdn.microsoft.com/en-us/library/ff428642.aspx
Next, the eventMap div, do you specify any styles for this? It should have a position, width and height specified in as either a CSS class or as an inline style. Without this you will get odd rendering in some browsers.

After a huge reserach I found that the issue was with the css. Thanks #rbrunditt for help
mapcontrol.css inside http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css/bin/6.3.20091207154938.04/de/mapcontrol.css have a class for the map container- .MSVE_Map which have the attribute position:absolute which was making the tiles display out of the screen.
I have overridden the class to position:relative which actually solved the issue..

Related

Getting an error (code = SCRIPT5009) while trying to initialise a Google Maps map

I'm trying to develop a web mobile app that allows people to navigate between different POI's however I've come across an error when trying to implement the Google Maps Api.
Here's the code for those interested:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile_Map_Application</title>
<style type="text/css">
html, body{ height: 100%; width: 100%; margin: 0; padding: 0; }
#map{height:100%;}
</style>
<script>
var map;
function initialise(){
map = new google.maps.Map( document.getElementById( 'map' ), {
zoom: 17,
center: { lat: 51.887082, lng: -2.088722 }
} );
initialise();
</script>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialise" async defer>
</script>
</head>
I'm getting the following error :
SCRIPT5009: 'google' is undefined
How can I fix this?
The problem
Your initialise() function doesn't know the google object yet, because the google object is only known AFTER the Google API script is loaded.
The solution
The easiest way to fix this, is to do this :
Put the code of your initialise() function AFTER the Google API script's script tag
Remove the async defer from the Google API script's script tag
Additionally :
You're also missing an } at the end of your initialise() function.
You'll need an HTML element with an id map for your code to work.
Working code
Check out this Fiddle for how to fix your code!
You're calling initialise(); once in your code, but this could execute before the Google Maps JS has loaded.
You also specify initialise as the callback function, in
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialise" async defer>
This will execute the initialise function once the Maps JS has loaded. That's all you need; delete the initialise(); line you have in your own JS.
PS: John's answer points out a couple of things you need to do.
You need a closing } at the end of the function,
And you need <div id="map"></div> in your page.
PPS: you don't need to specify the sensor=false argument any more when loading the Maps API.

Visual Studio 2015: Unable to reference Bing Maps library

I'm developing a javascript/html application for WP8.1 [WinJS 4.3/ HTML] in Visual Studio Community 2015 and now I'm at the part of implementing the map.
Unfortunately I seem to be unable to reference the javascript api (bing ajax)... Seems like implementing this in my pivot item doesn't get the library properly (not at all to be more specific) Following the steps here https://msdn.microsoft.com/en-us/library/gg427624.aspx to download the library from the server:
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
Fails to reference it and using "Microsoft." namespace ends in error.
So I've tried to install the bing maps extension for VS, which gets installed, but I cannot add the reference to the extension in my VS2015 Community. https://visualstudiogallery.msdn.microsoft.com/224eb93a-ebc4-46ba-9be7-90ee777ad9e1
<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
But that is again without any success.
So I'm stuck without the library and any map. Any chance there would be an offline version of the bing maps javascript api I could download and reference the same way as WinJS.
This has been covered on the Bing Maps blog and was a topic at the Microsoft //Build/ conference this year. Here is the video: https://channel9.msdn.com/Blogs/Best-of-Build-2015-Cloud/Visualizing-Business-Data-on-any-Device-with-Bing-Maps
Here is a blog post: https://blogs.bing.com/maps/2013/06/28/cross-platform-development-with-bing-maps-and-phonegap/
Basically, you will need to use the web URL:
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
But you when you go to load the map you will need to wait for the Microsoft namespace to become available. Alternatively load the map on the document.body.onload event. Here is how you can wait for the Microsoft namespace before loading the map:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
var mapElement = document.getElementById('myMap');
if (typeof Microsoft == 'undefined' ||
typeof Microsoft.Maps == 'undefined' ||
mapElement == null) {
setTimeout(getMap, 100);
return;
}
map = new Microsoft.Maps.Map(mapElement, { credentials: 'Your Bing Maps Key' });
}
getMap();
</script>
</head>
<body>
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
The example you posted still seems like it's designed for web page use so it's referencing external JS files.
With windows apps if you ever have to call a JS file it can never be external, so if you ever see an example that has src="http://..." know it wont work or you will have to download it local.
Try this link: https://msdn.microsoft.com/en-us/library/hh852186.aspx
It switches to all local references.
That article has a complete example too which helped me get my version working.
Now if they only ported the offline maps option...

Google Maps JS APIV3

Im having a hard time solving a problem i have using Google Maps JS APIv3.
I always get:
TypeError: google.maps is undefined
This is always the case, and i can't figure it out. It's driving me crazy.
I have some JS files in my head:
<!-- Javascript files -->
<script type="text/javascript" src="/resources/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=****"></script>
<script type="text/javascript" src="/resources/js/lightSlider/js/jquery.lightSlider.js"></script>
<script type="text/javascript" src="/resources/js/light-gallery/js/lightGallery.min.js"></script>
<script type="text/javascript" src="/resources/js/cycle.js" defer></script>
And my code for getting the map is:
$.each(google.results, function(x, y) {
var lat = y.geometry.location.lat;
var lng = y.geometry.location.lng;
var map;
function initialize(lat,lng) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat,lng)
};
map = new google.maps.Map(document.getElementById('gmaps'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(lat,lng));
});
I should mention that the last block of code ($.each) is in a AJAX call when the ajax is done.
Edit: I have tried some of the solutions that i have seen here.
Thanks in advance.
Are you sure you're using your correct key when loading the api ?
src="https://maps.googleapis.com/maps/api/js?key=****"
There's few more basic things you need to verify,maybe it's because you're missing one of them :
1- Declare the application as HTML5 using the "< ! DOCTYPE html>" declaration.
2- Create a div element named "gmaps" to hold the Map(well,i assume you did this already).
3- also if you're using an external file for your js code,make sure to load it in your html file.

How to add javascript to an image from the content_wrapper in the css stylesheet

I am creating a website (http://yic.am) using wordpress and the theme includes a background and a "subpage_content_bg". The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page.
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. However, I cannot seem to find a description for when the picture is a part of the css stylesheet.
The subpage-extract from the stylesheet looks like this:
#sp .content_wrapper_sbl {
width:940px;
min-height:320px;
margin:-107px auto 0;
padding:45px;
position:relative;
z-index:20;
background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? I would like it to be for all pages and posts (except the cover-page)
How do I make the subpage image the target of the function? Is it possible to make the #sp or content_wrapper_sbl the target?
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. I hope all the necessary information is included - any help would be much appreciated.
The code I am working is this: http://jsfiddle.net/EahRx/870/
It looks like you've pretty much got it nailed in that fiddle, haven't you? It's personal preference how you want to arrange your javascript files, I guess. Personally, I like to use the Google library to load my jQuery...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using...
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins.
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this...
<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>
<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>
Hope this helps point you in the right direction.
Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too...
$(document).ready(function(){
[YOUR JQUERY HERE]
});

Uncaught ReferenceError when accessing an object from another JS file

I have various JS libraries in my web application, which are loaded before my main JS file (main.js). One of these libraries is jshashtable, but when I try to create a new Hashtable object in main.js, Google Chrome and Firefox throw a ReferenceError, complaining that the variable does not exist.
Here is the <head> of the application:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/jquery-1.4.4.min.js"></script>
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<script type="text/javascript" src="/static/main.js"></script>
Here is the problem line in main.js:
posts = new Hashtable();
This line is inside a function called init which is called when the page has finished loading (using the jquery $(document).ready() function).
Any reason why Hashtable is not global? Google maps and jquery objects work with no such problem. The source of jshashtable can be seen on Google code.
Updated answer: The problem is that you've got a typo in the script tag:
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<!-- ^^---- here (the letters are transposed) -->
I couldn't understand why you would be running into a problem and decided to actually copy-and-paste your script tags and replicate the structure exactly on my machine. And things stopped working and my world tilted 3° counter-clockwise until I finally stared at them long enough to see it.
Provided that the jshashtable code really is at /static/jshashtable-2.1.js and your server is serving it up correctly (double-check on Chrome's resources tab in the dev tools), I can't see any reason for that. Your scripts are in the right order, and jshashtable's docs show using a global Hashtable (and the code link you gave clearly shows it creating one).
Edit: I've just replicated that same structure (same scripts, same order, using jQuery(document).ready(function() { ... });) on my own server, and am not having that problem. I can create a Hashtable and use its functions.
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='jquery-1.4.4.js'></script>
<script type='text/javascript' src='jshashtable-2.1.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<body>
</body>
</html>
My main.js:
jQuery(document).ready(function() {
try {
var ht = new Hashtable();
display("typeof ht = " + typeof ht);
display("ht.size() = " + ht.size());
}
catch (e) {
display("Exception: " + e);
}
function display(msg)
{
$("<p>").html(msg).appendTo(document.body);
}
});
Only difference is I'm not using a /static prefix, and I'm absolutely certain that makes no difference.

Categories