<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">
function GetMap()
{
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
I've tried even loading a simlple map but I get a js error on the Microsoft class undefined
Add the following line to the <head> section of your page, before the section that you've pasted above:
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"
charset="UTF-8"></script>
Have you included the include for the maps api?
<script type="text/javascript" src="bingmaps.js"></script>
Or are you using the rest service, in which case you need to specify the location of the service in an AJAX call...
http://www.earthware.co.uk/blog/index.php/2010/10/using-jquery-with-the-bing-maps-rest-api/
Related
I am using d3.geomap in Grails to create a map of the US.
As said in https://d3-geomap.github.io/ my gsp look like:
<html>
<head>
<meta name="layout" content="main" charset="utf-8">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'd3.geomap.css')}" type="text/css">
<g:javascript src="d3.geomap.dependencies.min.js" />
<g:javascript src="d3.geomap.min.js" />
</head>
<body>
<script>
var map = d3.geomap.choropleth()
.geofile('/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv("mapusa", function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>
<div id="map"></div>
</body>
</html>
The css file d3.geomap.css is under web-app/css.
The js files d3.geomap.dependencies.min.js and d3.geomap.min.js are under web-app/js.
Under grails-app/views/ I have the topojson folder.
When I run the page it gives me:
Uncaught TypeError: Cannot read property 'choropleth' of undefined
d3.geomap is undefined.
Any ideas?
Thanks in advance.
In my main.gsp I have:
<script src="http://d3js.org/d3.v3.min.js"></script>
When I remove this, then d3.geomap has value and show the US map. I am not sure why they enter in conflict.
Try this code below, you will get your desired output of world map. Similarly, you can do it for US maps.
<head>
<meta charset="utf-8">
<link href="https://d3-geomap.github.io//d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="https://d3-geomap.github.io//d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="https://d3-geomap.github.io//d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = d3.geomap().geofile('https://d3-geomap.github.io//d3-geomap/topojson/world/countries.json');
d3.select('#map')
.call(map.draw, map);
</script>
I want to add a googlemap to my html page using gmaps.js api. I put the gmaps.js file to same folder with my html page but when i try to load my html page nothing happens below is my code
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TaxiPolis|#Web-taxi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" scr="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="web_taxi_css.css"/>
<script type="text/javascript" src="web_taxi_java.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
height:100;
}
#map_canvas{
width:100%;
height:100%;
}
javascript:
$(document).ready(function() {
var map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
});
So when I test it on Google Chrome and IE I get the Error:
Uncaught ReferenceError: GMaps is not defined
Any ideas why this happening?
Thanks in Advance.
Your html has a typo:
Change
<script type="text/javascript" scr="gmaps.js"></script>
to
<script type="text/javascript" src="gmaps.js"></script>
The GMaps object does not exist. You have to use an object of the type google.maps.Map to load a map on your page.
This should be your javascript code:
$(document).ready(function() {
new google.maps.Map(document.getElementById('map_canvas'), {center: {lat:-12.04333, lng:-77.02833}});
});
A basic example can be found here.
Keep on getting this error in the console "Uncaught ReferenceError: google is not defined". Been doing it for a while now but no luck. Any help greatly appreciated. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize(location) {
console.log(location);
var mapOptions = {
center: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
$(document).ready(function()
{
navigator.geolocation.getCurrentPosition(initialize);
});
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
There was problem in script declaration in your code. You missed to close script tag for jquery and hence google map js wasn't load properly.
Just change below...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"**[[Problem is here]]**</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
to
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
and it should work fine.
Here's Demo
For me
Adding this line
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Before this line.
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
worked
I have 2 javascripts registered to a page. One being for google maps api and the other being the initialization function to get the map loaded and created. Now whichever one I put first will successfully work, but whichever I put second will not load properly. So If i put the googleapi first, firebug will tell me initialize doesn't exist and vise versa. So how can i get both to be loaded successfully. Below is the page and JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(43.652073, -79.382293);
var myOptions = {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<asp:ContentPlaceHolder ID="Header" runat="server">
<ucHead:UC_Header runat="server" ID="UC_Header" />
</asp:ContentPlaceHolder>
</head>
<body onload="initialize()">
<div class="sidePanel">
<ucMenu:UC_Menu runat="server" ID="UC_Menu" />
</div>
<div class="mainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
</html>
You must close your script tags...
You cannot do this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
It must look like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" ></script>
You need a </script> tag after the googleapis.com script tag.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" /></script>
I am using the following code to show a jQuery UI dialog when the mouse is clicked on the map:
GEvent.addListener(map, "click", clicked);
function clicked(overlay, latlng) {
$('#dialog').show();
};
Both clicked function and show() function works fine on their own but when I want to open dialog box by clicking on the map it does not. Any ideas?
You may want to check out the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps jQuery UI Demo</title>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"
type="text/javascript"></script>
<script src="jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 450px; height: 300px"></div>
<div id="dialog" title="Basic Dialog" style="display: none;">Dialog</div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(overlay, latlng) {
$('#dialog').dialog();
});
</script>
</body>
</html>
Screenshot:
alt text http://img517.imageshack.us/img517/643/jquerygoogle.png