Apologies, I am really new to this - I am following the google tutorials however I am unable to get the map to show in the html. I know the javascript is executing as I can see some manual console logs I put through the script. I also know the location is taken from the user.
I have 2 separate files, googlemaps.js and home.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<script src="{% static 'js/googlemaps.js' %}"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9etM9rqnYas63ypURAkvEFn_W_sU0NM4&callback=initMap">
</script>
</head>
<body>
<div id="map">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</div>
</body>
</html>
And in the js file I have :
var curLat = null; //user location
var curLon = null;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
window.alert("no location");
}
}
function showPosition(position) {
curLat = position.coords.latitude;
curLon = position.coords.longitude;
}
function initMap(){
getLocation() //finds out user location to fomat the map
if (curLat == null){
curLat = 42.3601; //if the user location cannot be found, set default ones
curLon = -71.0589; // of boston
console.log("random locations");
}
var options = {
zoom:10,
center:{lat:curLat, lng:curLon}
}
var map = new google.maps.Map(document.getElementById("map"),options);
}
If possible, could you please point me to what I am doing wrong in the HTML? Thank you
You have two errors:
1- You have to use if(curLat == null) note that double equal
2- The style property for map is not set correctly.
This two files in same folder work for me:
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<script src="googlemaps.js"></script>
</head>
<body>
<div id="map" style="height: 400px; width: 100%;">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9etM9rqnYas63ypURAkvEFn_W_sU0NM4&callback=initMap">
</script>
</body>
</html>
And googlemaps.js:
var curLat = null; //user location
var curLon = null;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
window.alert("no location");
}
}
function showPosition(position) {
curLat = position.coords.latitude;
curLon = position.coords.longitude;
}
function initMap(){
getLocation() //finds out user location to fomat the map
if (curLat == null){
curLat = 42.3601; //if the user location cannot be found, set default ones
curLon = -71.0589; // of boston
console.log("random locations");
}
var options = {
zoom:10,
center:{lat:curLat, lng:curLon}
}
var map = new google.maps.Map(document.getElementById("map"),options);
}
Regards.
There is a few things wrong, firstly you are using which is usually used for templating systems such as twig. To include your js file all you need is
After that where it says if(curLat = null) you are setting the variable to null. I would use if(curLat == null || curLon == null)
Related
On my website, I made a redirect page to redirect people according to their languages and browsers. But it only works once, when I visit my website again, it won't redirect.
HTML:
<html lang="zh-CN">
<head>
<script>
function redirect(){
// redirect according to browsers
var temp = window.navigator.userAgent.toUpperCase();
var charHead = temp.indexOf('MSIE');
var charLast = temp.indexOf(";", charHead);
var ieVersion = temp.substring(charHead, charLast);
ieVersion = ieVersion.split(' ')[1];
if (ieVersion <= 8) {
window.location.href="https://compat.windowsme.xyz:914";
}
if (localStorage.getItem("visit") == null)
{
// redirect according to user language
console.log("redirecting...")
var language = navigator.language || navigator.browserLanguage; //for IE
if (language == 'zh-CN'){
document.location.href = 'zh-index.html';
}
else if (language == 'zh-HK' || language == 'zh-TW'){
document.location.href = 'hant-index.html';
}
else {
document.location.href = 'en-index.html';
}
}
localStorage.setItem("visit", new Date());
redirect()
}
</script>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>redirect</title>
</head>
<body onload="redirect()">
</body>
</html>
It's because on the second visit the item in LocalStorage is not null anymore. Why do you store this information? If you remove the if handler, it will work on every site visit.
I am trying to pass value of latitude to the a-frame component as defined below. I am unable to do so. Please help. It seems trivial, I am new to Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Component Add</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="js/aframe.min.js"></script>
<script src="js/three.js"></script>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position){
var Latitude = position.coords.latitude;
var Longitude = position.coords.longitude;
var arr = [Latitude, Longitude];
return arr;
}
// Store returned value in a variable
var all = showPosition(position);
// Displaying individual values
console.log(all[0]);
AFRAME.registerComponent('log', {
schema: {
message: {type: 'number', default: all[0]},
},
init: function () {
console.log(this.data.message);
}
});
</script>
<a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" log="">
<!-- <a-sky src="MonValley_A_LookoutPoint_8k.jpg"></a-sky>-->
<a-assets>
<img id="sky" src="img/mon.jpg">
</a-assets>
<a-sky src="#sky" material="" geometry="" ></a-sky>
<div class="a-loader-title" style="display: none;">Hello, WebVR! • A-Frame</div>
</a-scene>
</body>
</html>
In the debugger it shows a message TypeError:position is undefined
I need to setup a page that allows users to register using their e-mail but as a requirement the e-mail shouldn't be "visible" for human eyes, I guess there's got to be a better way to do it, but so far I came up with this option using JQuery:
I created a fake control that handles the masking and captures the text so that it can be assigned to a hidden field (so that the previously working code will keep working without changes).
var emailControl = $("#eMail");
var firstHalf = "";
var secondHalf = "";
var fullMail = "";
emailControl.keyup(function(e){
var control = e.currentTarget;
var currentText = $(control).val();
if (currentText.length == 0){
fullMail = '';
firstHalf = '';
secondHalf = '';
$(control).attr('type', 'password');
}
else{
var components = currentText.split("#");
var hiddenPart = "•".repeat(components[0].length);
detectChanges(currentText);
if (components.length == 2) {
secondHalf = '#' + components[1];
}
$(control).attr('type', 'text');
$(control).val(hiddenPart + secondHalf);
fullMail = firstHalf + secondHalf;
}
});
function detectChanges(originalText) {
var position = originalText.indexOf('#');
if (position == -1) {
position = originalText.length;
}
for (var i = 0; i < position; i++){
if (originalText[i] != "•"){
firstHalf = firstHalf.substring(0, i) + originalText[i] + firstHalf.substring(i+1);
}
}
}
I did manage to get it working here: https://codepen.io/icampana/pen/KbegKE
You could give the input tag type of password: type="password".
It may cause some janky things to happen with autofill.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
email: <input type="password" name="email">
</form>
</body>
</html>
You could also do something similar with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input {
-webkit-text-security: circle;
}
</style>
</head>
<body>
<form>
email: <input name="email">
</form>
</body>
</html>
I'm trying to follow this Google Maps example, but instead of hardcoding my API KEY, I'm trying to fetch it from an API I created.
So, I created this HTML file. The KEY is properly fetched, but when I'm trying to set the script's src attribute on runtime (so I can add my own key to the URI), it's not getting added at all.
This is my HTML
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers example</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>
$.get( "maps_api_key", function( data ) {
const API_KEY = String(data)
console.log("API_KEY: " + API_KEY)
var uri = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY + "&callback=initMap"
console.log("URI is: " + uri)
$("#maps_fetcher").attr("src", uri)
});
</script>
<script id="maps_fetcher" async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
console.log("Map fetcher")
</script>
</body>
</html>
The line at console.log("Map fetcher") is never being printed either.
For what it's worth, I'm serving the HTML through Node and Express.
Any ideas on what could be happening here?
Thanks in advance
Can anyone solve this code?
i have some javascript code geolocation and here map script, i want to put geolocation coordinate in here map script..
here bellow my code..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.css" />
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="getLocation()">My Location</button><br/>
<input type="text" id="latpos" name="latpos">
<input type="text" id="longpos" name="longpos">
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var origlat= position.coords.latitude ;
var origlong= position.coords.longitude ;
var lat=document.getElementById("latpos");
lat.value=origlat;
var lon=document.getElementById("longpos");
lon.value=origlong;
}
function addMarkerAndSetViewBounds(map) {
var latitu="-6.811408423530006";
var longitu= "110.85068956017494";
var origl= origlat;
var origlo= origlong;
var Isone = new H.map.Marker({lat:latitu, lng:longitu}),
geol = new H.map.Marker({lat:origl, lng:origlo}),
group = new H.map.Group();
group.addObjects([Isone , geol]);
map.addObject(group);
// get geo bounding box for the group and set it to the map
map.setViewBounds(group.getBounds());
}
/Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: false,
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:50, lng:5},
zoom: 15
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
addMarkerAndSetViewBounds(map);
</script>
</body>
</html>
but, that code didn't work fine..
how to get value var origlat and var origlong in variable var origl and var origlo?
can anyone help me to fix this code run correctly
You should make origlat, origlong global variables, instead of local variable.
http://www.w3schools.com/js/js_scope.asp