Akifcan / googlemaps-vue-3

Google maps javascript api library for vue.js 3
15 stars 2 forks source link

Use vue in info window #4

Closed SebastiaanKloos closed 3 years ago

SebastiaanKloos commented 3 years ago

Is it possible to use vue components and click handlers in the info window? How should I implement this?

Akifcan commented 3 years ago

hello sory for late response. now i updated googlemaps-vue-3 package. You can use info window with this way

const markers = reactive([
      {
        lat: 48.8566,
        lng: 2.3522,
        content: { content: `Paris Capital of <b>France</b>` },
        icon:
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png",
      },
      {
        lat: 51.5074,
        lng: 0.1278,
        content: { content: `London Capital of <b>England</b>` },
        icon:
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png",
      },
      {
        lat: 41.9028,
        lng: 12.4964,
        content: { content: `Roma Capital of <b>Italy</b>` },
      },
      {
        lat: 41.9028,
        lng: 12.4964,
        content: { content: `Roma Capital of <b>Italy</b>` },
      },
      {
        lat: 40.4168,
        lng: 3.7038,
        content: { content: `Madrid Capital of <b>Spain</b>` },
      },
      {
        lat: 39.9334,
        lng: 32.8597,
        content: { content: `Ankara Capital of <b>Turkey</b>` },
      },
    ]);
    <GoogleMap :init="initializeGoogleMap" :markers="markers" />
    <GoogleMap :init="initializeGoogleMap" :addMarkerOnClick="true" :markers="markers" />