How to connect google map to vue project?

Question

Google Maps

I'm trying to insert a google map into a vue project and using vue2-google-maps
Initially the code and map looks like this:
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
      );   .....

In the project: codesandbox vue
for some reason swears at google.
Question: is it possible to implement similar code for a map in a vue project , if so, how?
For example this piece of code:

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; .......

Where is it more correct to place the json file itself (in src ?) and how to declare it ( var url = 'data.php';inside data() {the function or separately?
Am I connecting the map correctly, maybe somehow you can just import

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

?

Answer 1

Am I connecting the card correctly?

Of course not - you clearly haven't read the documentation. It's in vain. Here 's a correctly connected card - compare how it was, how it became, think, read the documentation.