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.
Related
The below code actually works and shows the map with correct location and marker (the div with id="map", scripts with javascript function and API) when I put the code into another html document without any other content.
The problem now is that for some reason, when I am using the exact same codes for Google Maps with working API in this HTML, the map does not show up at all.
Here is my code:
<html lang="en" dir="ltr">
<head>
<title>-</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
/* Set the size of the div element that contains the map */
#map {
width: 100%; /* The width is the width of the web page */
max-width:450px;
}
</style>
<link rel="stylesheet" type="text/css" href="../main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
...
<div class="row">
...
<div class="col-sm-6">
<div id="map"></div>
</div>
</div>
<script>
// Initialize and add the map
function initMap() {
// The location of company
var freshlocation = {lat: 1.337344, lng: 103.912835};
// The map, centered at company
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 7, center: freshlocation});
// The marker, positioned at company
var marker = new google.maps.Marker({position: freshlocation, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
...
</div>
</body>
</html>
I am wondering if it has something to do with some of the codes in head, such as importing fonts or bootstrap, or the position of the maps div, like putting the map into container or row class. Any help would be greatly appreciated.
Ok, I have managed to figure out the answer. Setting the height of the map div solved the problem.
I can't see the google map on my monitor, but when I put all the code in a single html file and use script tags it works.
Index.html file is:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
></script>
</body>
</html>
Script.js file is:
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: -34.397,
lng: 150.644
},
zoom: 8
}
);
}
style.css file is:
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map { width:100%; height:200px;}
or to fill whole window:
#map { width:100%; min-height:100%;}
if it's first child with min-height property. PS. You can also try to add overflow:hidden; for second example.
According to the documentation : Google Maps APIs, just put your JavaScript (script.js) after your map.
<div id="map"></div>
<script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" async defer></script>
Edit : Don't forget "async defer" at the end of the second script.
I consolidated your HTML and it works fine. For some reason, your callback function is not working when in a separate file.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: -34.397, lng: 150.644},
zoom: 8
}
);
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
></script>
</body>
</html>
When you execute script.js it tries to find the div with the id="map". But it's not initialized yet .So, you need to do two things:
Include the script.js file after your <div id="map"></div>
Call initMap() after the page has loaded. E.g. like this (at the end) <script>initMap()</script>
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>
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
<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/