AdvancedMarkerElement do not display on the map - Stack Overflow

admin管理员组

文章数量:1289582

Description of the issue

I have a vue app that worked with the legacy markers and i am moving to the new AdvancedMarkerElement. However, i am unable to make it work.

• The whole logic works, listerners to add markers (and populate this.markers) and delete them.
• Markers do not show up in the map

My app has a MarkerMap.vue, here i use js-api-loader by doing

import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({
        apiKey: config.GOOGLE_MAPS_API_KEY,
        version: "weekly",
        libraries: ["marker"],  // for advanced marker usage
        mapIds: config.GOOGLE_MAP_ID, // if you have a vector-style map
        });
        // Load the script
        await loader.load();
        // Now window.google is ready
        this.initMap();

Then to init the map and with the listener to add the markers.

import { Loader } from "@googlemaps/js-api-loader";
initMap() {
        console.log(google.maps)
        // Create the map exactly like the sample
        this.map = new google.maps.Map(document.getElementById("map"), {
            mapId: config.GOOGLE_MAP_ID,
            center: this.initialCenter,
            zoom: 14,
        });
        // Listener to add a marker on click
        this.map.addListener("click", (event) => {
            const position = {lat: event.latLng.lat(), lng:event.latLng.lng()}
          this.addMarker(position);
        });
      },
addMarker(position) {
        console.log("Position of marker: ", position);
        console.log("Map: ", this.map);
        const marker = new google.maps.marker.AdvancedMarkerElement({
            map:this.map,
            position: position,
            title: "Click to zoom",
        });
        console.log("Marker:", marker)
        this.markers.push(marker);
      },

Details of the execution

google.maps loads correctly and the listeners get called correctly

This is a sample output from the console.

Position of marker:  {lat: 43.35413991531247, lng: -2.8252299055064745}
Map:  Proxy(An) {gm_bindings_: {…}, Fg: An, __gm: tfa, gm_accessors_: {…}, mapCapabilities: {…}, …}
Marker: <gmp-internal-am>​</gmp-internal-am>​

From logging google.map object, i checked that:

renderingType: "VECTOR"
mapCapabilities: 
  isAdvancedMarkersAvailable: true
  isDataDrivenStylingAvailable: true
  isWebGLOverlayViewAvailable: true

I also tried

I have also tried to add directly the marker to the document by doing: document.getElementById("map").appendChild(marker) This made the marker show up but fixed on the top left side of the map and did not move even if I dragged the map around.

Description of the issue

I have a vue app that worked with the legacy markers and i am moving to the new AdvancedMarkerElement. However, i am unable to make it work.

• The whole logic works, listerners to add markers (and populate this.markers) and delete them.
• Markers do not show up in the map

My app has a MarkerMap.vue, here i use js-api-loader by doing

import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({
        apiKey: config.GOOGLE_MAPS_API_KEY,
        version: "weekly",
        libraries: ["marker"],  // for advanced marker usage
        mapIds: config.GOOGLE_MAP_ID, // if you have a vector-style map
        });
        // Load the script
        await loader.load();
        // Now window.google is ready
        this.initMap();

Then to init the map and with the listener to add the markers.

import { Loader } from "@googlemaps/js-api-loader";
initMap() {
        console.log(google.maps)
        // Create the map exactly like the sample
        this.map = new google.maps.Map(document.getElementById("map"), {
            mapId: config.GOOGLE_MAP_ID,
            center: this.initialCenter,
            zoom: 14,
        });
        // Listener to add a marker on click
        this.map.addListener("click", (event) => {
            const position = {lat: event.latLng.lat(), lng:event.latLng.lng()}
          this.addMarker(position);
        });
      },
addMarker(position) {
        console.log("Position of marker: ", position);
        console.log("Map: ", this.map);
        const marker = new google.maps.marker.AdvancedMarkerElement({
            map:this.map,
            position: position,
            title: "Click to zoom",
        });
        console.log("Marker:", marker)
        this.markers.push(marker);
      },

Details of the execution

google.maps loads correctly and the listeners get called correctly

This is a sample output from the console.

Position of marker:  {lat: 43.35413991531247, lng: -2.8252299055064745}
Map:  Proxy(An) {gm_bindings_: {…}, Fg: An, __gm: tfa, gm_accessors_: {…}, mapCapabilities: {…}, …}
Marker: <gmp-internal-am>​</gmp-internal-am>​

From logging google.map object, i checked that:

renderingType: "VECTOR"
mapCapabilities: 
  isAdvancedMarkersAvailable: true
  isDataDrivenStylingAvailable: true
  isWebGLOverlayViewAvailable: true

I also tried

I have also tried to add directly the marker to the document by doing: document.getElementById("map").appendChild(marker) This made the marker show up but fixed on the top left side of the map and did not move even if I dragged the map around.

• google-maps-api-3

Share Improve this question Follow asked Feb 20 at 13:10 Alejandro Barredo ArrietaAlejandro Barredo Arrieta 1111 bronze badge 1

• The posted code works for me (with slight modifications to work in a fiddle): fiddle – geocodezip Commented Feb 21 at 0:15

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I'm not sure if you finally found a solution, but I faced the same problem and the issue was that the Map instance was made reactive by Vue.

I see the same happens to your code. The map is wrapped in a Proxy. If you are using Vue 3 or Vue's composition API you can use shallowRef instead of ref for storing the map instance.

With Vue 2 options API I think it might work if you don't add map to the data() function.

本文标签： AdvancedMarkerElement do not display on the mapStack Overflow