I have the following jsfiddle
https://jsfiddle.net/3qge41b0/
$('#myP').click(function() {
GetMap();
});
function GetMap() {
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script' + '> </body></html>';
$("#myDIV").html(text);
}
$('#myP2').click(function() {
GetMap2();
});
function GetMap2() {
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script' + '> </body></html>';
$("#myDIV").html(text);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<button id="myP">Click me.</button>
<button id="myP2">Or Click me.</button>
<div id="myDIV" style="width=100%;height=100%">This is a div element.</div>
</body>
</html>
$('#myP').click(function() { GetMap(); });
function GetMap()
{
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script'+'> </body></html>';
$("#myDIV").html(text);
}
$('#myP2').click(function() { GetMap2(); });
function GetMap2()
{
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script'+'> </body></html>';
$("#myDIV").html(text);
}
As you can see its just a div which is loaded dynamically with a html string.
The problem is, that the first button ends up in an error, because the ol.js library seems not be loaded. If I put a timeout in, it works (GetMap2). Also if you hit the first button a second time.
But I find this is rather a workaround than a solution. What if the connection is slow and the library takes more than 100 ms to load?
Is there a possibility to get the event when the library is loaded? I tried a lot of different ways of appending or adding the html string. Nothing worked. The ready or load event on the ol.js is not firing correctly.
Does anybody have an idea how to solve this?
Kind regards
Nico
With jquery you can use getScript to ensure the script is fully loaded.
$.getScript("https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js", function(){ LoadMap(); });
https://api.jquery.com/jQuery.getScript/
Example: https://jsfiddle.net/usc23yt6/#&togetherjs=9NyczI3xx7
Related
I'm new in mapquest, i want to create a web page where we can see a map. My example work's fine if i use a single "div", but if i use a "div" inside a "div", the maps don't loads compleatly.
working sample:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Hello World!</title>
<style type="text/css">
#mapa{ width: 800px; height: 600px;font-family:Arial }
</style>
</head>
<body >
<div id="mapa"></div>
<script type="text/javascript">
L.mapquest.key = 'KEY';
map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18
});
L.marker([38.58778619815616,-9.041748046875], {
icon: L.mapquest.icons.marker(),
draggable: false
}).bindPopup('Denver, CO').addTo(map);
L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);
var denverLatLngs = [
[36.99, -102.05],
[37, -109.05],
[41, -109.05],
[41, -102.05]
];
L.polygon(denverLatLngs, {color: 'red'}).addTo(map);
</script>
</body>
And i want to put it inside a container:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Hello World!</title>
<style type="text/css">
#mapa{ width: 800px; height: 600px;font-family:Arial }
</style>
</head>
<body >
<div id="container">
<div id="mapa"></div>
</div>
<script type="text/javascript">
L.mapquest.key = 'KEY';
map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18
});
L.marker([38.58778619815616,-9.041748046875], {
icon: L.mapquest.icons.marker(),
draggable: false
}).bindPopup('Denver, CO').addTo(map);
L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);
var denverLatLngs = [
[36.99, -102.05],
[37, -109.05],
[41, -109.05],
[41, -102.05]
];
L.polygon(denverLatLngs, {color: 'red'}).addTo(map);
</script>
</body>
/* This is the javascript function that makes the map load */
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {
lat: 44.540,
lng: -78.546
},
zoom: 8
});
}
/* This is the basic css */
#map {
width: 500px;
height: 400px;
}
<!-- Javascript called into the html page -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
</body>
</html>
your function is not calling use $(document).ready(function()()) for call your function
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
$(document).ready(function() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
});
</script>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
you need to add a DOM listener that will execute the initMap() function on window load.
try this
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(44.540, -78.546),
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
#map {
width: 500px;
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js" ></script>
<div id="map"></div>
I'm trying to set up the google map api on my website so for part of a delivery service I'm offering. I copied the code directly from the sample on developers.google.com but for some reason my map wont load on my page!Ive gone through the code multiple times and cant get it to load...HELP!
<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 }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.mapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
The html:
<body onload="initialize()">
<div class="map-canvas" style= "height: 100%">
</div>
</body>
I get a javascript error: Uncaught TypeError: Cannot read property 'ROADMAP' of undefined
This:
mapTypeId: google.maps.mapTypeId.ROADMAP,
Should be:
mapTypeId: google.maps.MapTypeId.ROADMAP,
The major problem is: Uncaught TypeError: Cannot read property 'offsetWidth' of null because your page doesn't have a div with id="map-canvas":
<div class="map-canvas" style= "height: 100%">
Should be:
<div id="map-canvas" style= "height: 100%;">
You are also calling initialize twice, change:
<body onload="initialize()">
To:
<body>
Complete page (works locally):
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<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 }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body >
<div id="map-canvas" style= "height: 100%;">
</div>
</body>
</html>
I see three issues
you use getElementById, but you give your div a class of map-canvas
it's *M*apTypeId (capital M)
you need to give your map-canvas div a fixed height
Also, since you are using addDomListener, it's unnecessary to also have an onload event on the body tag too. I would just use addDomListener.
<!DOCTYPE html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</script>
<style>
#map-canvas{
height: 400px;
}
</style>
</head>
<body>
<div id="map-canvas">
</div>
</body>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
I am using the sample code from google as below. When I try to zoom out to minimum, there appear about 8 maps. WHat is wrong with it? As my understanding, there should only one world map when zoom out to minimum? Is there any parameter I can set?
Here is the code:
<!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://maps.googleapis.com/maps/api/js?key=AIzaSyAoQaaN9DLOjrVigdieAL_a1ZkFapkZ8_Y&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setZoom(3);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I am working with Google Maps and I want to load the map in an external file, where I can use jQuery to set up the rest of the page.
I have made three changes to the Hello World example: I've included jQuery, I've initialised the map in an external file, and I've removed the onload event in the <body> tag. And I now have a blank screen where there used to be a map, and no console errors to give me a clue.
This is my HTML:
<!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 src="./js/jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
<script src="./js/maps.js"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is maps.js in full:
$(document).ready(function () {
console.log('document ready');
function initializeMap() {
console.log('initialize');
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
initializeMap();
});
I don't see any of the console statements. I also don't see a map - just a blank screen.
I must be doing something stupid, but what is it?
You're missing an </script> after src="http://maps.googleapis.com/maps/api/js?sensor=true">