IvanInvanov
@IvanInvanov
Новичок

Почему-то не работает гугл карта на сайте?

Добрый день, подскажите кто знает, сейчас я учусь добавлять карту Google на сайт и делаю это с помощью этой статьи. Я сделал все, как было указано, но карта не работает, скажите, пожалуйста, почему? Где я ошибся? Api-ключ правильный 100%. И я включил карту в Google Cloud Platform. Я использую Vue cli Webpack-simple. Когда я открываю сайт она показывается серой зоной на экране, если что-либо не нужное закомментировать то карта показывается, но вылазят такие ошибки, если перезагрузить страницу то снова серая область вместо карты и если снова раскомментировать, то что было заккоментированно, то карта снова показывается. Мой код также есть на GitHub : GitHub
Я так же еще использовал npm install --save google-maps.
5d0e6a5cad9fb019465951.png
5d0e699c2dfc7566683212.png
5d0e68c07e495139147188.png

Мой 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>


Мой компонент ГуглМап:
<template>
   <div class="google-map" :id="name"></div>
</template>

<script>
import GoogleMapsLoader from 'google-maps'

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>


Мой 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>
  • Вопрос задан
  • 1206 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fzero0
@Fzero0
Вечный студент
Если Вы используете npm install --save google-maps зачем вы делаете так?
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>

<template>
<div id="map"></div>
</template>

<script>
import GoogleMapsLoader from 'google-maps'

export default {
name: "Map",
mounted: function () {
  GoogleMapsLoader.KEY = 'AIzaSyCreM63W1kHeozDLz0WohGhVAC2-PE8vv8';
  GoogleMapsLoader.load(function(google) {
    let map = new google.maps.Map(document.getElementById('map'), {
     zoom: 14,
     center: new google.maps.LatLng(59.93, 30.32)
    })
  })
}
}
</script>

<style scoped>
#map {
    height:300px;
    width: 100%;
   }
</style>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы