Как подключить google map в vue проект?

Question

[HamSter]

Пытаюсь вставить гугл карту в vue проект и использую vue2-google-maps

Изначально код и карта выглядит так:

codesandbox

var url = 'data.php';

gmarkers = [];

var iws = [];


function initialize() {

  var content = document.getElementById('iw');

  var lat = 39.9995601,
      lng = -75.1395161,
      latlng = new google.maps.LatLng(lat, lng);		

  var mapOptions = {           
    center: new google.maps.LatLng(lat, lng),           
    zoom: 12,           
    mapTypeId: google.maps.MapTypeId.ROADMAP         
  };

  var mapCanvas = document.getElementById('map');

  var map = new google.maps.Map(mapCanvas, mapOptions);


  downloadUrl(url, function(data) {	        	

    var j = eval('(' + data.responseText + ')');       	

    var jlength = j.locations.length;	        	

    for (var i = 0; i < jlength; i++) {
      console.log( parseFloat(j.locations[i].location.lat) );

      var x =  parseFloat(j.locations[i].location.lat);
      var y = parseFloat(j.locations[i].location.lon);
      var name = j.locations[i].name;
      var adress = j.locations[i].adress;
      var lable = j.locations[i].lable;
      var prev = j.locations[i].prev;

      gmarkers[name] =
        createMarker(
        new google.maps.LatLng(x, y),
        lable
      );   .....

В проекте: codesandbox vue

почему-то ругается на google.

Вопрос: возможно ли реализовать подобный код для карты в vue проекте, если да то как?

Например такой кусок кода:

downloadUrl(url, function(data) {	        	

	        	var j = eval('(' + data.responseText + ')');       	
	        	
	        	var jlength = j.locations.length;	         


	    		for (var i = 0; i < jlength; i++) {
	    			console.log( parseFloat(j.locations[i].location.lat) );

	    			var x =  parseFloat(j.locations[i].location.lat);
	    			var y = parseFloat(j.locations[i].location.lon);
	    			var name = j.locations[i].name;
	    			var adress = j.locations[i].adress;
	    			var lable = j.locations[i].lable;
	    			var prev = j.locations[i].prev; .......

Где правильней расположить сам файл json (в src ?) и как его объявить (var url = 'data.php'; внутри data() { ф-ии или отдельно?

Правильно ли подключаю карту, возможно как-то можно просто импортировать

<script src="https://maps.google.com/maps/api/js?libraries=places&region=uk&language=en"></script>

?

Comments

[Модератор]

Нарушение пункта 4.2 правил! В следующий раз будет бан учётной записи.

Answer 1

[0xD34F]

Правильно ли подключаю карту

Конечно же нет - документацию вы явно не читали. Это зря. Вот вам правильно подключенная карта - сравнивайте как было, как стало, думайте, читайте документацию.

Comments

[0xD34F]

HamSter, знаете, когда я сказал "сравнивайте как было, как стало" - я имел в виду именно то, что тут написано. Если бы вы последовали моему совету, то заметили бы, что были добавлены следующие строки:
import { gmapApi } from 'vue2-google-maps';
и

computed: {
  google: gmapApi
}

Соответственно, google доступен как this.google.

[Сергей delphinpro]

HamSter, у вас на скрине this пропущен, раз уж обращаетесь к свойству компонента

this.google

[0xD34F]

HamSter, что значит "ничего не работает"? - у меня работает.

Если действительно не работает - следует рассказывать, какие возникают ошибки, чем наблюдаемое поведение отличается от ожидаемого и т.д. А если "не работает" - это всё, что вы способны сообщить, тогда лучше вообще молчать.

[0xD34F]

HamSter, я же вам показал, как правильно подключить карту, почему вы продолжаете упорствовать в своих заблуждениях? Какой на хрен new this.google.maps.Map? Компонент всё это делает за вас. Не понимаете? Ну значит вы не понимаете, как работать с vue, вообще. Так что лучше бы отложить карту в сторону, открыть документацию к vue, и вперёд - через тернии к знаниям.