I've been trying to initialize a Google map on my vue.js project while including the script :
<script src="https://maps.googleapis.com/maps/api/js?key="MY_API_KEY"&callback=initMap" async defer></script>
The problem is that my .vue files look like that :
<template>
...
</template>
<script>
...
</script>
And I can't include more than one script tag in my vue file, I can show the map while passing by the index.html but I dont really want to put js on the index.html, + I can't point the script callback on a vue method.
Do you guys have some ideas on how to show up that map using a .vue file ? I did use vue2-google-maps but I'd like to use the original google map.
I have a fiddle which is doing something ok : https://jsfiddle.net/okubdoqa/ without using a callback in the script tag, but it doesnt work for me ... Thanks
I'd suggest using npm google-maps instead of adding a script in index.html. You might not need to call google-maps API in every pages, and I'd say it's better to use Webpack properly. You can use npm install google-maps
import GoogleMapsLoader from 'google-maps'
mounted: function () {
GoogleMapsLoader.load(function(google) {
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: position
})
})
}
It's a little fussy to get this working without using a library, and there are probably cleaner ways, but you can simply import the library and use it in your components if you want to get up and running.
First, don't use the defer & async options in the <script> tag. Load it in the index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=yourKey"></script>
Then in your component you can access the global google and pass it an element once the component is setup. For example using the setup from the Vuejs cli:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="myMap"></div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}},
mounted: function() {
console.log("map: ", google.maps)
this.map = new google.maps.Map(document.getElementById('myMap'), {
center: {lat:61.180059, lng: -149.822075},
scrollwheel: false,
zoom: 4
})
}
}
</script>
<style scoped>
#myMap {
height:300px;
width: 100%;
}
</style>
I was searching for a different issue and found this one, there is another way that you could achieve this without having to add it in index.html.
I faced a similar problem where I had to use two Google API keys for different environments so hard-coding it in to index.html was not a good idea, I did this if it helps anyone -
main.js
export const loadedGoogleMapsAPI = new Promise( (resolve,reject) => {
window['GoogleMapsInit'] = resolve;
let GMap = document.createElement('script');
GMap.setAttribute('src',
`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY}&callback=GoogleMapsInit®ion=IN`);
document.body.appendChild(GMap);
});
MapElem.vue
<template>
<div id="map"></div>
</template>
<script>
import {loadedGoogleMapsAPI} from '#/main'
export default {
name: 'MapEl',
mounted(){
loadedGoogleMapsAPI.then(()=>{
this.initMap()
});
},
methods:{
initMap(){
console.log(google.maps); //You can now access google maps object here
new google.maps.Map(document.getElementById('map'), {
// You configuration goes here
})
}
}
</script>
It's pretty straightforward, you write a Promise in main.js which will resolve to the callback initiated by Google script ( which we dynamically appended to the body ). Once the Promise is resolved you can access the map object in your component.
There's a different way if you would like to keep the code contained in a Component using the async loader $Scriptjs.
Install via npm
npm install scriptjs
import into your component
import $Scriptjs from 'scriptjs
load the script in the mounted hook (assuming you have a method in your component called initMap)
...
mounted () {
$Scriptjs('https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}', () => {
this.initMap()
}
...
Initial vue part after Using google map callback function.
function initMap(){
var app = new Vue({
el:"#app",
data:{
name:"Niklesh Raut",
map:"",
mapOptions:{}
},
mounted(){
this.initMap();
},
methods:{
initMap: function(){
this.mapOptions = {
center: new google.maps.LatLng(21.139808079490507, 79.07690763473511),
zoom: 10,
mapTypeId: 'roadmap'
}
this.map = new google.maps.Map(document.getElementById("map"), this.mapOptions);
}
}
});
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#content {
width: 100%;
/*padding: 20px;*/
min-height: 100vh;
transition: all 0.3s;
}
.map{
height: 100%;
width:100%;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUFmbwJMBHU_paeMfVO7oqPC1IJEtbJUU&callback=initMap"></script>
</head>
<div id="app" class="wrapper">
<div id="content">
Name : {{name}}
<div id="map" class="map"></div>
</div>
</div>
Jsfiddle Link
Best and simple way to integrate Google Maps to Vue is use npm's libs.
You need to use vue-google-maps
npm install vue2-google-maps
then,
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_TOKEN',
},
})
Just simple paste code below:
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
</GmapMap>
Related
I have open source library that I want to use. the library wrote in clean vanilla js:
follow their docs, if I want to use the library:
<html>
<head>
<script src="./jquery-2.0.3.min.js"></script>
<script src="./kinetic-v5.1.0.min.js"></script>
<script src="./inchlib-1.2.0.js"></script>
<script>
$(document).ready(function() { //run when the whole page is loaded
var inchlib = new InCHlib({"target": "inchlib",
"width": 800,
"height": 1200,
"column_metadata_colors": "RdLrBu",
"heatmap_colors": "RdBkGr",
"max_percentile": 90,
"middle_percentile": 60,
"min_percentile": 10,
"heatmap_font_color": "white",
text: 'biojs'});
inchlib.read_data_from_file("/microarrays.json");
inchlib.draw();
inchlib.onAll(function(name){
console.log(name + " event triggered");
});
});
</script>
</head>
<body>
<div class="heatmaps" style="margin:auto; align-items: center; margin-left:25%;">
<div id="inchlib"></div>
</div>
<div ></div>
</body>
</html>
The file inchlib-1.2.0.js contains the main logic and js code. I want to build react project and use this library there. How can I achieve this goal?
import React, { Component } from 'react';
import './App.css';
export default class App extends Component {
render () {
return (
<div>
<div>
</div>
</div>
)
}
}
You can create custom hook with useEffect. In useEffect you should paste your code. You can insert html elements, add event listeners and so on.
useLibrary.js
import { useEffect } from "react";
const useLibrary = () => {
useEffect(() => {
$.getScript("inchlib-1.2.0.js", function(){
var inchlib = new InCHlib({"target": "inchlib",
"width": 800,
"height": 1200,
"column_metadata_colors": "RdLrBu",
"heatmap_colors": "RdBkGr",
"max_percentile": 90,
"middle_percentile": 60,
"min_percentile": 10,
"heatmap_font_color": "white",
text: 'biojs'});
inchlib.read_data_from_file("/microarrays.json");
inchlib.draw();
inchlib.onAll(function(name){
console.log(name + " event triggered");
});
});
}, []);
};
export default useLibrary;
App.js
import useLibrary from ".useLibrary";
export default class App extends Component {
useLibrary();
render () {
return (
<div>
<div class="heatmaps" style="margin:auto; align-items: center; margin-left:25%;">
<div id="inchlib"></div>
</div>
</div>
)
}
}
But I warn you that this is a big crutch.
Depends on what you're gonna do with the library you want to integrate with. Checkout this as a base reference: Integrating with other libraries.
If you're gonna manipulate DOM elements you'll gonna need a reference to them. In this case checkout this: Refs and the DOM.
If the library provides some general logic, you have no problem using it anywhere throughout your code or more specifically in effects.
As inchlib is a visual element library, you'll need to go the first route and get a reference to a specific DOM element. As already noted, checkout Refs from react docs.
Alternative solution is to wrap the whole library usage in your own react component.
Well If I were to do the same thing then I would paste the script tags as you've done in your html file
<head>
<script src="./jquery-2.0.3.min.js"></script>
<script src="./kinetic-v5.1.0.min.js"></script>
<script src="./inchlib-1.2.0.js"></script>
<script>
</head>
For accessing an object into react app, Create a file named Inchlib.js in same directory as is your app.js
Contents of Inchlib.js should be
export default window.InCHlib;
Import the default export into your app.js
import InCHlib from "./inchlib";
function App() {
console.log(InCHlib); // prints the InCHlib object
return "hello";
}
Note: Although this should work, there might be a better way to do this. Also using global objects in react code is not usually a preferred option.
Hopefully this would help.
Just add the Libraries and Scripts you want in the public/index.html file in your react project.
create loadScript function:
function loadScript(src, position, id) {
if (!position) {
return;
}
const script = document.createElement('script');
script.setAttribute('async', '');
script.setAttribute('id', id);
script.src = src;
position.appendChild(script);
}
in Component:
export default function GoogleMaps() {
const loaded = React.useRef(false);
if (typeof window !== 'undefined' && !loaded.current) {
if (!document.querySelector('#google-maps')) {
loadScript(
'https://maps.googleapis.com/maps/api/js?key=AIzaSyBwRp1e12ec1vOTtGiA4fcCt2sCUS78UYc&libraries=places',
document.querySelector('head'),
'google-maps',
);
}
loaded.current = true;
}
}
now you can access window.google
here is a example
I've been using basic HTML/CSS/JS so far, and now I tried using React/Gatsby.
I got API code from Kakao and confirmed the following code is working in index.html:
<body>
<div id="map" style="width:1000px;height:500px;"></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
<script>{
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(37.56591, 126.97894),
level: 4,
mapTypeId : kakao.maps.MapTypeId.ROADMAP
};
var map = new kakao.maps.Map(mapContainer, mapOption);
}</script>
</body>
Since I'm trying React/Gatsby framework, I have to somehow reformat that script to index.js. HTML can be easily copy/pasted to return function, but I don't know how to write the above script in React index.js.
import React from "react"
export default class Home extends React.Component {
render() {
return (
<div style={{ color: `purple` }}>
<p>Welcome to donghwankim.com!</p>
<p>Powered by Gatsby</p>
<div id="map" style={{"height" : "1000px", "width" : "500px"}}></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
<script>{
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(37.56591, 126.97894),
level: 4,
mapTypeId : kakao.maps.MapTypeId.ROADMAP
};
var map = new kakao.maps.Map(mapContainer, mapOption);
}</script>
</div>
)}
}
Few things I tried:
Just copy paste script like above. In this case, I get syntax error from the copied script:
Unexpected token. Did you mean {'}'} or }?
Use dangerouslySetInnerHTML. There is no syntax error, but the map API is not working properly.
Thank you.
It seems like part of this script will need to be rewritten for React. You should look for a library for this that supports React. If there isn't one, you can use DOM refs to access the mapContainer without document.getElementById. Alternatively if you just want to use this script as-is, you can use a simpler static site generator like Jekyll that doesn't require you to use React.
2022 update
Since the release of the Script Gatsby component (powered by Partytown) it's much easier adding third-party scripts. Just:
import React from "react"
import { Script } from "gatsby"
function YourPage() {
return <Script src="https://my-example-script" />
}
export default YourPage
There's a lot of implementation there.
First of all, you need to load your script asynchronously using <Helmet> tag by using:
import React from "react"
import Helmet from "react-helmet"
export default class Home extends React.Component {
render() {
return (
<div style={{ color: `purple` }}>
<Helmet>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608" type="text/javascript"/>
</Helmet>
<p>Welcome to donghwankim.com!</p>
<p>Powered by Gatsby</p>
<div id="map" style={{"height" : "1000px", "width" : "500px"}}></div>
</div>
)}
}
Because of the asynchronous of your issue, you need to load a <div> container for your map and wait for its load, then you need to pass your map options. The preferred method in React, rather than document.getElementById (or similar), what retrieve directly values from the DOM, is using references. You'll need to use a componentDidMount() lifecycle to achieve it, since it's a method invoked that triggers immediately after a component is mounted (inserted into the tree):
import React from "react"
import Helmet from "react-helmet"
export default class Home extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount(){
const map= this.myRef.current;
const mapOption = {
center: new kakao.maps.LatLng(37.56591, 126.97894),
level: 4,
mapTypeId : kakao.maps.MapTypeId.ROADMAP
};
const yourMap = new kakao.maps.Map(map, mapOption);
}
render() {
return (
<div style={{ color: `purple` }}>
<Helmet>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608" type="text/javascript"/>
</Helmet>
<p>Welcome to donghwankim.com!</p>
<p>Powered by Gatsby</p>
<div id="map" ref={this.myRef} style={{"height" : "1000px", "width" : "500px"}}></div>
</div>
)}
}
Note: you may need to unmount the map to avoid excessive resource consumption. It depends on how the library is implemented and its documentation.
Recommended readings/references:
https://github.com/nfl/react-helmet
https://reactjs.org/docs/refs-and-the-dom.html
https://reactjs.org/docs/react-component.html#componentdidmount
https://reactjs.org/docs/state-and-lifecycle.html
I'm trying to update a map to my current location using a vue onClick which updates props and sends them to my map component. I am using a :key to rerender my map component when my map data changes and I get some new x,y for my map center. (based on the esri/arcgis example I would need to rebuild the map, if anyone knows this to be wrong let me know please)
VUE js arcgis starting documentation:
https://developers.arcgis.com/javascript/latest/guide/vue/
for some reason my map does render again and seems like it's about to load but then it just stays blank.
maybe someone can tell me if this is an issue with the component still persisting in some way after I force it to render again?
my app.vue
<template>
<div id="app">
<web-map v-bind:centerX="lat" v-bind:centerY="long" ref="mapRef"/>
<div class="center">
<b-button class="btn-block" #click="getLocation" variant="primary">My Location</b-button>
</div>
</div>
</template>
<script>
import WebMap from './components/webmap.vue';
export default {
name: 'App',
components: { WebMap },
data(){
return{
lat: -118,
long: 34,
}
},
methods:{
showPos(pos){
this.lat = pos.coords.latitude
this.long = pos.coords.longitude
this.$refs.mapRef.updateCoordinates()
console.log('new location',this.lat,this.long, this.$refs)
},
getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showPos);
} else {
console.log("Geolocation is not supported by this browser.");
}
},
},
};
</script>
my map component
<template>
<div></div>
</template>
<script>
import { loadModules } from 'esri-loader';
export default {
name: 'web-map',
props:['centerX', 'centerY'],
data: function(){
return{
X: this.centerX,
Y: this.centerY,
view: null
}
},
mounted() {
console.log('new data',this.X,this.Y)
// lazy load the required ArcGIS API for JavaScript modules and CSS
loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
.then(([ArcGISMap, MapView]) => {
const map = new ArcGISMap({
basemap: 'topo-vector'
});
this.view = new MapView({
container: this.$el,
map: map,
center: [this.X,this.Y], ///USE PROPS HERE FOR NEW CENTER
zoom: 8
});
});
},
beforeDestroy() {
if (this.view) {
// destroy the map view
this.view.container = null;
}
},
methods:{
updateCoordinates(){
this.view.centerAt([this.X,this.Y])
}
}
};
</script>
I don't think the key you're passing as a prop to web-map serves any purpose since it's not being used inside the component.
You could try, instead, to force update the component as such:
<web-map v-bind:centerX="lat" v-bind:centerY="long" ref="mapRef" />
this.refs.mapRef.$forceUpdate()
This ensures that you're force updating the whole component, but maybe there's a better solution. Instead of re-rendering the entire component, which means having to create the map once again, you could instead keep the component alive and just use an event to update the coordinates.
Based on https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#centerat, you can re-center the map using the centerAt method.
That way the map component has a method like:
updateCoordinates(coord){
this.view.centerAt(coord)
}
And you can call it on the parent with
this.refs.mapRef.updateCoordinates(newCenter)
Hope it helps, let me know if you do any progress.
I think you can test Watch with setInterVal() for a loop to check your location each 1sec
I have a CRUD that enables me to write Vue.js component's code in the textarea like:
<template>
<div><p class='name-wrapper'>{{ model.name }}</p></div>
</template>
<script>
module.exports = {
name: 'NameWrapper',
props: ['model']
}
</script>
<style lang='sass'>
.name-wrapper
color: red
</style>
Then in other component, I fetch this data and want to register it as a dynamic/async, custom component like:
<template>
<component :is='dynamicName' :model='{name: "Alex"}'></component>
</template>
<script>
import httpVueLoader from 'http-vue-loader'
import Vue from 'vue'
export default {
name: 'DynamicComponent',
props: ['dynamicName', 'componentDefinitionFromTextareaAsString'],
beforeCreate: {
// I know that as a second parameter it should be an url to the file, but I can't provide it, but I would like to pass the contents of the file instead there:
httpVueLoader.register(Vue, this.$options.propsData.componentDefinitionFromTextareaAsString)
// I was trying also:
Vue.component(this.$options.propsData.dynamicName, this.$options.propsData.componentDefinitionFromTextareaAsString)
}
}
</script>
As far as I know, httpVueLoader needs the url to the .vue file instead - is there a way to pass there the code itself of the component?
I am aware that passing and evaluating <script></script> tag contents can cause security issues, but I really need to do it that way.
I've read also about Vue.js compile function, but that works only for templates, not the code of the component (so the script tags again).
Is it even possible to achieve such functionality in Vue.js?
It should be possible to use a data: URI with http-vue-loader, like this:
const vueText = `
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
<\/script>
<style>
.hello {
background-color: #ffe;
}
</style>
`
const MyComponent = httpVueLoader('data:text/plain,' + encodeURIComponent(vueText))
new Vue({
el: '#app',
components: {
MyComponent
}
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader#1.4.1/src/httpVueLoader.js"></script>
<div id="app">
<my-component></my-component>
</div>
If that doesn't work for some reason (maybe because one of your target browsers doesn't support it) then you could get it working by patching httpRequest. See https://www.npmjs.com/package/http-vue-loader#httpvueloaderhttprequest-url-. The documentation focuses on patching httpRequest to use axios but you could patch it to just resolve the promise to the relevant text.
Good afternoon, please tell me who knows, I am now learning to add a Google map to the site and do it with this article. I did everything as it was indicated, but the card does not work, please tell me why? Where did I make a mistake? Api-key is correct 100%. And I turn on the map in Google Cloud Platform. I use Vue cli Webpack-simple. My project on GitHub
Screenshot of a broken map
Console Error
Code of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>google_map</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
</body>
</html>
Component Google.map:
<template>
<div class="google-map" :id="name"></div>
</template>
<script>
export default {
name: 'google-map',
props: ['name'],
data: function () {
return {
map: ''
}
},
computed: {
mapMarkers: function () {
return this.markers
}
},
mounted: function () {
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
},
methods: {}
}
</script>
<style scoped>
.google-map {
width: 640px;
height: 480px;
margin: 0 auto;
background: gray;
}
</style>
Code of App.vue:
<template>
<div class="container">
<google-map :name="name"></google-map>
</div>
</template>
<script>
import googleMap from './components/googleMap.vue'
export default {
data: function () {
return {
name: 'map',
}
},
mounted: function () {
},
components: {googleMap}
}
</script>
Looking at your original code, before you started trying to use GoogleMapsLoader, your error was very simple; you were trying to use window.google in the compiled JS, before it was loaded through googleapis.com. To fix, in your index.html, simply change this:
<script src="/dist/build.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
To this:
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
<script src="/dist/build.js"></script>
If you want to use GoogleMapsLoader, please follow the documentation they provide; you should be wrapping any calls to the Google Maps API inside a callback function that the loader calls. There are a bunch of different approaches to how to do this, and almost definitely a better way to set up a global instance, but to at least make your code work, this is how you would need to code your mounted function:
mounted: function () {
GoogleMapsLoader.KEY = '[MY_API_KEY]';
GoogleMapsLoader.load(function(google){
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
}.bind(this));
}