Vue.js breaking Google Map functionality

Question

Currently the code uses Vue.js to manage the inputs and post requests and is using JavaScript to handle things like Google Map functionality.

The issue is that when we wrap a div id around all the current HTML on a page so the Vue.js functionality works, it results in the Google Map code in a JavaScript file to run incorrectly and loads the page with no map. As soon as the Vue.js id (adminVenueVue) is removed the map works fine.

When trying to debug the issue it seems that the function that is responsible for updating the map doesn't run all the way through and stops when a listener function is created as no following code would run after. Below shows this function if you need more code please tell me.

function initCreateUpdateVenue() {
  var mapCenter = new google.maps.LatLng({
    lat: 54.445886,
    lng: -3.435974
  });

  var marker, london = {
    lat: 52.41,
    lng: -1.69
  };

  var ZoomLevel = 5;

  map = new google.maps.Map(document.getElementsByName('googleMap')[0], {
    zoom: ZoomLevel,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  map.setZoom(5);

  var input = (document.getElementsByName("autocomplete")[0]);
  var options = {
    componentRestrictions: {
      country: "uk"
    }
  };

  var autocomplete = new google.maps.places.Autocomplete(input, options);
  autocomplete.bindTo('bounds', map);

  autocomplete.addListener('place_changed', function() {
    var element = document.getElementsByName("autocomplete")[0];
    //remove any errors
    element.classList.remove("is-invalid");

    var place = autocomplete.getPlace();

    if (!place.geometry) {
      return;
    }

    populate_hidden_fields(place);
    set_venue_detail_fields(place);
    populate_fields(place.address_components);
    set_map_location();
  });
}

Here is the HTML code (the Google Map code is at the bottom)


  
    
      
        
          
            Administrator Controls
            
              @include('venue.components.admin_controls', ['submitButtonText' => 'Add Type'])
            
          
        
      
      
        
          
            Start by finding your address
            
              @include('venue.components.autocomplete-form', ['submitButtonText' => 'Add Type'])
            
          
        
      
      
        
          
            Venue Details
            
              @include('venue.components.venue-details', ['submitButtonText' => 'Add Type'])
            
          
        
        
          
            Address Details
            
              @include('venue.components.form', ['submitButtonText' => 'Submit Venue'])
            
          
        
      
    
  
  
    
      
        Map

Felipe Thomas · Accepted Answer

I recommend using the Vue google map component (vue2-google-maps).

Follow this example code:

Or, if you're using webpack and Vue file components, follow the instructions bellow.

First install it : npm install vue2-google-maps

Then register it in main.js file

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places', // This is required if you use the Autocomplete plugin
  }
})

So, you can use it like a component:

More at: https://www.npmjs.com/package/vue2-google-maps

https://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html

https://alligator.io/vuejs/vue-google-maps/ (tutorial)

Vue.js breaking Google Map functionality

Answers (1)

Related Questions