gmap3 don't work on my website - javascript

gmap3 doesn't work on my website and I don't know why, can someone help me to find the error ?
"I need to add some words to publish my question, so don't read that line sorry"
here is my link:
http://www.booclin.ovh/site/plan.html
Here is my code:
<!DOCTYPE html> <html lang="fr">
<head>
<!--[if lt IE 9]> <div style="background:#fff; font-size:1.2rem; line-height:1.8em; padding-top:300px;color:#282828; height:100%; width:100%; z-index:999999999999999; position:fixed; text-align:center;"> <div style='margin:0px 20px 0 20px; width:100%; max-width:600px; margin:0 auto; '>Vous utilisez une ancienne version d'Internet Explorer. Pour des raisons de sécurité, vous devez mettre à jour votre navigateur. S'il vous plaît aller dans "mises à jour de Windows" et installer la dernière version. Merci </div> </div> <![endif]-->
<!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <![endif]-->
<head> <meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> </title>
<meta property="og:description" content="">
<meta name="keywords" content="">
<meta name="LANGUAGE" content="FR">
<meta name="SUBJECT" content="">
<meta name="ROBOTS" content="All">
<meta name="OWNER" content="">
<meta name="RATING" content="">
<meta name="COPYRIGHT" content="">
<meta name="expires" content="never">
<meta name="GOOGLEBOT" content="index">
<meta name="Slurp" content="index">
<meta name="MSNBot" content="index">
<meta name="ICBM" content="">
<meta name="Identifier-URL" content="">
<link property="stylesheet" rel="canonical" href=""/>
<link property="stylesheet" type="image/x-icon" rel="shortcut icon" href=""/>
<link property="stylesheet" type="image/x-icon" rel="icon" href=""/>
<link property="stylesheet" rel="image_src" href=""/>
<meta property="og:image" content=""/>
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:description" content="">
<meta name="keywords" content="">
<link property="stylesheet" rel="stylesheet" type="text/css" href="index/css/style.css">
<link property="stylesheet" rel="stylesheet" type="text/css" href="index/font/font.css"/>
</head>
<body>
<div class="left part">
<div style="border:80px solid #fff; width:500px;height:500px;" id="adresse" class="gmap3"> </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"> </script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"> </script>
<script type="text/javascript" src="index/js/gmap3.js"> </script>
<script type="text/javascript">
$(function(){
$('#adresse').gmap3({marker:{address: "Apple Store, Saint-Laurent-du-Var, France"},
map:{options:{zoom: 17}
}
});
});
</script>
</body>
</html>

Your api key is missing, as you can see in the console:
Google Maps API error: MissingKeyMapError
Follwing the configuration page of the documentation: http://gmap3.net/configuration.html
You can load the library with the api key
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=GB"></script>
Or use the api key when loading the map
$.gmap3({
key: 'YOUR_API_KEY'
});

Related

How can I make sure Webpack doesn't create duplicate data?

I'm currently having a problem where if I build my webpack for development(probably have the same in production), that I see duplicate meta tags. When I open up the browser inspector I also see duplicate react components within my code. I'm assuming there's something going on with my webpack.config.js.
Here's my webpack code
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
aboutme: [
path.resolve(__dirname,'src/about-me.js'),
]
},
resolve: {
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
}
}
My React Code
import { createRoot } from 'react-dom/client';
import './index.css';
import AboutMePage from './pages/aboutme';
const aboutMeCont = document.getElementById('about-me-root');
const aboutMeRoot = createRoot(aboutMeCont);
aboutMeRoot.render(<AboutMePage />);
HTML Input
<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">
<title><%= htmlWebpackPlugin.options.title %></title>
<%= htmlWebpackPlugin.tags.headTags %>
</head>
Here's the html output that I am getting:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="">
<meta name="viewport" content="">
<meta name="author" content="">
<meta name="og:title" content="">
<meta name="twitter:title" content="">
<meta name="og:image" content="">
<meta name="twitter:image" content="">
<meta name="description" content="">
<meta name="og:description" content="">
<meta name="twitter:description" content="">
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="og:url" content="">
<meta name="og:type" content="">
<link rel="icon" href="favicon.ico">
<script defer src="aboutme.js"></script>
<meta name="author" content="">
<meta name="og:title" content="">
<meta name="twitter:title" content="">
<meta name="og:image" content="">
<meta name="twitter:image" content="">
<meta name="description" content="">
<meta name="og:description" content="">
<meta name="twitter:description" content="">
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="og:url" content="">
<meta name="og:type" content="">
<link rel="icon" href="favicon.ico">
<script defer src="aboutme.js"></script>
</head>
Here's the browser output

Why isn't Select2 being applied to my select element?

This is the input I want to add my project https://select2.org/tagging but it's show like this:
I added Select2 installation links but it doesn't work. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<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">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<title>Document</title>
</head>
<body>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true
});
</script>
</body>
</html>
The class name in your script doesn't occur in your markup. It needs to be on the select element.
Also, you don't seem to be loading jQuery, on which Select2 depends.
<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">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true
});
</script>
</body>

Refused to apply style' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

here is my code
i am trying to run it on a django server and it is giving me that error
would appreciate and help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<title>Travel</title>
<!--stylesheet-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<link href="styles/custom-responsive-styles.css" rel="stylesheet" type="text/css">
<!--scripts-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts/all-plugins.js"></script>
<script type="text/javascript" src="scripts/plugins-activate.js"></script>

After Angular 8 upgrade the Angular scripts are inserted at the start of the HTML document

I upgraded from Angular 7.2 to Angular 8 and now all the Angular scripts are inserted at the very start of the HTML (before !DOCTYPE).
Is this a bug? Does anyone know what might be causing it?
<script src="runtime.js" defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="scripts.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script><!DOCTYPE html>
<html>
<head>
<base href="/my-app/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
My original HTML is pretty standard. The only oddities are an ng-app-settings.js script that loads some JSON for app config and the use of the TypeKit service for fonts. Neither of these caused a problem for Angular 7.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
Thanks for any help
Try adding body tags to your HTML.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<body>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</body>
</html>

Why is my img ontop of my script

I̶'̶m̶ ̶h̶a̶v̶i̶n̶g̶ ̶t̶r̶o̶u̶b̶l̶e̶ ̶h̶a̶v̶i̶n̶g̶ ̶t̶h̶e̶ ̶i̶m̶g̶ ̶o̶n̶ ̶t̶o̶p̶ ̶o̶f̶ ̶m̶y̶ ̶s̶c̶r̶i̶p̶t̶.̶
New Problem the script is stuck to the side instead of the whole page (still a beginner)
It's a particle-js script i want to be the whole page background and the img to be center and on in on top of particles.
body {
text-align: center;
background: #1b1b1b
}
.img {
position: absolute;
z-index: 0;
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
</head>
<body>
<img class="img" src="./img/Biohazard.png" alt="13" align="center">
<div id="particles-js"></div>
<script type="text/javascript" src="assets/js/particles.min.js"></script>
<script type="text/javascript" src="./assets/js/app.js"></script>
</body>
</html>
You just write a typo attribute instead of class you type claas

Categories