MapBox gl js, Browser console security Error - javascript

I'm using Mapbox gl js into a website to show safari's map. I created my mapbox account and my API token and i'm experiencing a browser error:
SecurityError: The operation is insecure. cecb579d-d0ad-424a-9e7d-bf4c7353d904:1
If i try to open the source debug blob i get a blank page :(
Thx in advance
here is the code:
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://unpkg.com/#turf/turf#6/turf.min.js"></script>
</head>
<body>
<div id="map"></div>
<div class="overlay">
<button id="replay">Replay</button>
</div>
<!-- here i used the defoult API key -->
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk1IiwiYSI6ImNrcTRlajRrajE3cnIydnFyMGMwN3cyeG4ifQ.jU5odECEGnFPWjflz37KhA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [36, -1],
zoom: 7.3
});
// 1 Nairobi, Kenya
var marker1 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.70, -1.30])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('Nairobi, Kenya'))
.addTo(map);
// 2 The Great Rift Valley View Point, B 3, Kenya
var marker2 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.58, -1.08])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('The Great Rift Valley View Point, B 3, Kenya'))
.addTo(map);
[...]
</script>
</body>
<html> ```

I've removed some scripts from your code and it seems to work fine. please refer to this link
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map"></div>
<div class="overlay">
<button id="replay">Replay</button>
</div>
<!-- here i used the defoult API key -->
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk1IiwiYSI6ImNrcTRlajRrajE3cnIydnFyMGMwN3cyeG4ifQ.jU5odECEGnFPWjflz37KhA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [36, -1],
zoom: 7.3
});
// 1 Nairobi, Kenya
var marker1 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.70, -1.30])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('Nairobi, Kenya'))
.addTo(map);
// 2 The Great Rift Valley View Point, B 3, Kenya
var marker2 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.58, -1.08])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('The Great Rift Valley View Point, B 3, Kenya'))
.addTo(map);
</script>
</body>
<html>

Related

Why is the basic example of the ArcGIS JavaScript API throwing an error?

I'm trying to use the ArcGIS JavaScript API to build some interactive web maps. However, using the code found on the official documentation throws an error every time. I have a working API key, ommitted in the example below, of course.
Is there something I'm missing?
Error:
Exception has occurred.
Object
Code:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
esriConfig.apiKey = "YOUR_KEY_HERE";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
const view = new MapView({
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

Use mapquest api into DIV inside of DIV html

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>

Google Maps Marker doesn't show up in my website

Can someone help me please I don't understand javascript
<script type="text/javascript">
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(31.6321288,-8.0099319,787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLatLng = new google.maps.LatLng(31.6321288,-8.0099319,787);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: "We Are Here"
});
</script>
According to the Google Documentation, it is as follows.
Make sure you include this line in your html tag and get your Google Map API Key to replace the YOUR_API_KEY
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
1 - You need to create a Google Maps project and generate an API KEY (https://console.developers.google.com). It's very simple and fast.
2 - So, you need to import GoogleMapsAPI, changing YOUR_API_KEY for your API KEY:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
The result is something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat:31.6321288, lng:-8.0099319};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

getCurrentPosition on chrome breaks javascript

I have a page where I am loading google maps. I use getCurrentPosition over http and even I receive a warning from google api. The problem is that it breaks also the javascript and that ruins everything. The code was working for quite some time but the last week things broke.
Below is the html and script. You can add it in html and run it and see (tried with stackoverflow but had some issues with the script)
<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, maximum-scale=1, user-scalable=no" />
</head>
<body>
<header class="desktop">
</header>
<div id="st-container" class="st-container">
<div class="st-pusher">
<div class="st-content">
<div class="st-content-inner">
<div class="logo-mobile">
</div>
<section class="map-sections">
<div style="position: absolute; z-index: 1000; width: 100%; margin-top: 30px;">
<div class="row">
<div class="large-12 columns">
<div class="filter clearfix">
<input type="text" id="search-field" placeholder="Search place">
<span>eller...</span>
Search near you
</div>
</div>
</div>
</div>
<div id="google_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript">
function showMap(userPos) {
if (!!navigator.geolocation) {
var map;
if (userPos == 'true') {
var mapOptions = {
zoom: 12,
enableHighAccuracy: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else {
var mapOptions = {
zoom: 5,
enableHighAccuracy: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function (position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var sectionList = [
['Stockholm', 59.327, 18.067],
['Göteborg', 57.70889, 11.97348]
];
var mapPinUser = '/dist/img/map-pin-user.png';
var mapPinSection = '/dist/img/map-pin-section.png';
// User's position
var marker = new google.maps.Marker({
position: geolocate,
map: map,
icon: mapPinUser,
title: "ok"
});
for (var i = 0; i < sectionList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(sectionList[i][1], sectionList[i][2]),
map: map,
icon: mapPinSection,
id: i,
animation: google.maps.Animation.DROP,
title: sectionList[i][0]
});
}
if (userPos == 'true') {
map.panTo(geolocate);
}
else {
map.setCenter({ lat: 61.58549, lng: 15.02930 });
}
});
} else {
document.getElementById('google_canvas').innerHTML = 'No Geolocation Support.';
}
}
showMap('false');
</script>
<style>
#google_canvas {
height: 65vh;
}
</style>
</section>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>
</html>
getCurrentLocation is only supported over https:// now on Chrome.
There has been a warning in place in the javascript console in Chrome for quite a while, and it was announced a while ago.
reference from your comment
Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.

How to make the little guy in google map snap back to the nearest point if threw away?

In this google map sample: http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
If the user dropped the little guy far away in the middle of the ocean for example, it disappears.
But in the main google map website http://maps.google.com/ If you made it show the street view, and the user dragged the guy away it get back automatically to the previous point.
What is missed in the first example to make it behave the same as the google map website?
here is the code of the sample:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
To do this, add an event listener to position_changed and use it to store the last (valid) location that pegman was dropped.
google.maps.event.addListener(panorama, 'position_changed', function() {
// Store position
});
And then add an event listener to visibility_changed (which is triggered when pegman is dropped in the ocean) to set him back to the last known location:
google.maps.event.addListener(panorama, 'visible_changed', function() {
if (panorama.getVisible() == false && last_location) {
panorama.setPosition(last_location);
}
});

Categories

Resources