I'm working on MapBoxgl and I want to add the location of a restaurant as a marker.
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Com Viet</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/Styles/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">
<!-- Mapbox API -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Geocode -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>
<body>
<section id="map">
<h1>Find Us</h1>
</section>
<script src="app.js"></script>
</body>
</html>
This is app.js:
mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';
const map = new mapboxgl.Map({
container: 'map', //appears in the container with the ID map
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.1103, 51.5082], // Starting position [lng, lat]
zoom: 11.89, // [Starting zoom]
});
// Custom Marker
var marker = new mapboxgl.Marker() // initialize a new marker
.setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
.addTo(map); // Add the marker to the map
// Geocode
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
mapboxgl: mapboxgl, // Set the mapbox-gl instance
marker: false, // Do not use the default marker style
placeholder: '',
proximity: {
longitude: -0.1103,
latitude: 51.5082
}
});
// Add the geocoder to the map
map.addControl(geocoder);
The CSS is:
#map {
width: 100%;
height: 500px;
}
mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';
const map = new mapboxgl.Map({
container: 'map', //appears in the container with the ID map
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.1103, 51.5082], // Starting position [lng, lat]
zoom: 11.89, // [Starting zoom]
});
// Custom Marker
var marker = new mapboxgl.Marker() // initialize a new marker
.setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
.addTo(map); // Add the marker to the map
// Geocode
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
mapboxgl: mapboxgl, // Set the mapbox-gl instance
marker: false, // Do not use the default marker style
placeholder: '',
proximity: {
longitude: -0.1103,
latitude: 51.5082
}
});
// Add the geocoder to the map
map.addControl(geocoder);
#map {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Com Viet</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/Styles/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">
<!-- Mapbox API -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Geocode -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>
<body>
<section id="map">
<h1>Find Us</h1>
</section>
<script src="app.js"></script>
</body>
</html>
This is the first picture before zooming in
This is the second picture after zooming in
I'm not sure what is causing the problem. Also the search box somehow seems to be above the map instead of inside it.
Your code is currently adding the marker to a map container which includes both the map and a heading "Find Us." This means the location is offset by the height of the heading.
<section id="map">
<h1>Find Us</h1>
</section>
To fix this you should move the map to its own <div> like this:
<section id="container">
<h1>Find Us</h1>
<div id="map"></div>
</section>
And your full code should look something like this:
mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';
const map = new mapboxgl.Map({
container: 'map', //appears in the container with the ID map
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.1103, 51.5082], // Starting position [lng, lat]
zoom: 11.89, // [Starting zoom]
});
// Custom Marker
var marker = new mapboxgl.Marker() // initialize a new marker
.setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
.addTo(map); // Add the marker to the map
// Geocode
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
mapboxgl: mapboxgl, // Set the mapbox-gl instance
marker: false, // Do not use the default marker style
placeholder: '',
proximity: {
longitude: -0.1103,
latitude: 51.5082
}
});
// Add the geocoder to the map
map.addControl(geocoder);
#map {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Com Viet</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/Styles/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">
<!-- Mapbox API -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Geocode -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>
<body>
<section id="container">
<h1>Find Us</h1>
<div id="map"></div>
</section>
<script src="app.js"></script>
</body>
</html>
Disclaimer: I work at Mapbox
In addition to Patrick's answer, a problem I ran into was I was setting the mapbox width and height programmatically in the code to 100vh:
dom: HTMLElement = this.elementRef.nativeElement;
elements = dom.querySelectorAll('.mapboxgl-canvas');
elements[0]['style']['height'] = '100vh';
I am using Angular, so your code for setting height & width might be different. When I switched it from 100vh to 100% this problem went away.
Related
I'm using a plugin for leaflet map geosearch https://github.com/smeijer/leaflet-geosearch this is the repository. My code is very simple but I can't get the result in my map.
I don't know what is happening. The error I get in the console is
TypeError: can't convert undefined to object
I expect when click on the result of the search I get a marker similar to this website have in the Google Map section https://investigadoresparaguayosenelmundo.com/registration/
Here is my code :
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!--CDN para agregar los cluster de Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.4.1/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster#1.4.1/dist/leaflet.markercluster.js"></script>
<!--CDN para el plugin de fullscreen del mapa-->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<!--CDN para agregar la barra de busqueda-->
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css"/>
<!-- Make sure you put this AFtER leaflet.js, when using with leaflet -->
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
</head>
<body>
<div id="leafletMap-registration"></div>
</body>
</html>
CSS:
#leafletMap-registration {
height: 400px; /* The height is 400 pixels */
}
Javascript:
// you want to get it of the window global
const providerOSM = new GeoSearch.OpenStreetMapProvider();
//leaflet map
var leafletMap = L.map('leafletMap-registration', {
fullscreenControl: true,
// OR
fullscreenControl: {
pseudoFullscreen: false // if true, fullscreen to page width and height
},
minZoom: 2
}).setView([0,0], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(leafletMap);
const search = new GeoSearch.GeoSearchControl({
provider: providerOSM,
style: 'bar',
searchLabel: 'Buscar institución',
autoClose: true,
});
leafletMap.addControl(search);
https://jsbin.com/lukikafalo/1/edit?html,css,js,console,output
You need to create the refs for your element.
In order to show the results lat lng on the map by placing a marker, you need to use keep result: true.
Use my elaborative blog:
https://medium.com/#jadhavshivam0228/open-street-maps-vuejs-integration-39c39b85b5bc
I'm trying to design a web app for mapping accessibility on my university. Unfortunately the map only loads until I try resize the map so they would shown on the whole webpage. Most of the plugins I tried to add (like Fullscreenmode or Location doesn't work, too). The page turns white. What did I do wrong?
Here are my snippets:
// Initialize leaflet.js
var L = require('leaflet');
//OSM tiles attribution and URL
var osmLink = 'OpenStreetMap';
var osmURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = '© ' + osmLink;
//Stamen Toner tiles attribution and URL
var stamenURL = 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}';
var stamenAttrib = 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap';
//Creation of map tiles
var osmMap = L.tileLayer(osmURL, {
attribution: osmAttrib
});
var stamenMap = L.tileLayer(stamenURL, {
attribution: stamenAttrib,
subdomains: 'abcd',
ext: 'png'
});
//Map creation
var map = L.map('map', {
zoomControl: false,
layers: [osmMap]
}).setView([50.927, 6.931], 16);
//Base layers definition and addition
var baseLayers = {
"OSM Mapnik": osmMap,
"Stamen Toner": stamenMap
};
//Add baseLayers to map as control layers
L.control.layers(baseLayers).addTo(map);
//Fullscreen button
map.addControl(new L.Control.Fullscreen());
map.on('fullscreenchange', function() {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
map.isFullscreen() // Is the map fullscreen?
map.toggleFullscreen() // Either go fullscreen, or cancel the existing fullscreen.
// `fullscreenchange` Event that's fired when entering or exiting fullscreen.
map.on('fullscreenchange', function() {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
//create custom zoom Control on right bottom
var zoomControl = L.control.zoom(
zoomOptions = {
position: 'bottomright'
}
).addTo(map);
// Initialize the base layer
//offer alternative base layer; include base layer choice toggle on top right of mapbox
var osm_mapnik = L.tileLayer('https://api.mapbox.com/styles/v1/jlambre1/cjtzjn4xv1ceo1fph8wuq1y9u/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoianVzbGFtYnJlIiwiYSI6ImNqeTB1ZGo4eTAxdXUzbmsyOG1xcmQ1NWMifQ.IWZKtDwcnUCq03fo9-ualg', {
maxZoom: 19,
attribution: '© OSM Mapnik OpenStreetMap'
}).addTo(map);
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
width: 100%;
}
<head>
<meta charset="utf-8">
<title>Mapping Acces #UzK</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- Leaflet CDN-->
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Leaflet CSS-->
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<!-- Leaflet Fullscreen-->
<link rel="stylesheet" href="./leaflet-fullscreen/Control.FullScreen.css" />
<script src="./leaflet-fullscreen/Control.FullScreen.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Locate-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol#[VERSION]/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol#[VERSION]/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<!-- jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Switching Basemaps-->
<link rel="stylesheet" href="L.Control.Basemaps.css" />
<script src="L.Control.Basemaps-min.js"></script>
<!-- Fullscreen -->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
</head>
And I receive this error message: https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
I try to make a leaflet map and added Openstreetmap as a background map. But if I load the map, nothing appears. Checking the firefox network analysis all the required tiles are loaded succesfully, but they do not show.
My HTML code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
<link rel="stylesheet" href="main.css">
<title>title</title>
</head>
<body>
<div id="map">
</div>
<div id="logo">
<!--- a logo will appear here --->
</div>
<script src="map.js"></script>
</body>
My javascript code :
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
});
osm.addTo(map);
The div "map" has a higher z-index than "logo", so that should not be the problem.
Where is map style ?
You should give a height and a width to your map in order to be rendered
<div id="map" style="width: 600px; height: 400px;">
Demo
I created a page with google maps and I need to print it, but a white line appears in the map in some coordinates of the map, not all the locations it appears.
Print
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Google Maps - Teste</title>
<!-- # CSS Imports # -->
<link href="css/site.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<!-- # Javascript Imports # -->
<script src="js/site.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOOGLEMAPS_API&callback=initMap"></script>
</body>
</html>
CSS Code (css/site.css):
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#media print {
img {
max-width: none !important;
}
}
Javascript Code (js/site.js):
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: -27.6301719,
lng: -49.0330395
},
mapTypeId: 'terrain'
});
}
EDIT 1:
I found a solution ... Instead of taking a screenshot of the div in question, use the Google Maps Static API, where you send some parameters and it returns an image ... BUUUUUT see edit 2...
https://developers.google.com/maps/documentation/static-maps/?hl=pt-br
EDIT 2:
The URL of google maps static is limited by 8192 chars, and i need draw ALOOOOT lines into maps... so... im back to the init...
[## Sorry my bad english :(]
Having a bit of trouble placing a map within data-role="content" while using Google Maps v3 and JQuery. No errors show in the console so I am having a hard time debugging. No map shows up on the screen.
Here are my two files:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="js/mapload.js"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
mapload.js
function initialize()
var mapOptions = {
center: new google.maps.LatLng(49,-8),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This gave me some insight but didn't complete answer my question.
EDIT: SOLUTION
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={REPLACE THE BRACKETS AND THIS TEXT WITH YOUR API KEY}&sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<script type="text/javascript">
$(document).on('pageinit', '#index',function(e,data){
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(11.618044,-34.823347),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content" style="padding:0;position:absolute;top:40px;right:0;bottom:40px;left:0;">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
There's only one available way of using Google maps with jQuery Mobile. Because jQuery Mobile is specific window load can't be used to initialize the map.
Specifically correct height is needed to initialize the map successfully and it can ONLY be done during the jQuery Mobile pageshow page event. If you want to find out more about jQuery Mobile page events and why is pageshow event important for plugin initialization take a look at my private blog ARTICLE. Or you can find it HERE.
Let me make this story short, here's a working example: http://jsfiddle.net/Gajotres/pkZHg/
And here's a javascript and CSS used:
Javascript
$(document).on('pageinit', '#index',function(e,data){
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(42.618044,-87.823347),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
CSS
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
load mapload.js at the end of the html
<div data-role="page" id="map">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="map-canvas"></div>
</div>
</div>
<script type="text/javascript" src="js/mapload.js"></script>
the DOM is not ready yet when you are calling the map functions
the other error might be CSS styling.. you could try this
a set width and height
`
#map-canvas {
width: 480px;
height: 640px;
}
`