Tips for customizing marker icon on vue-google-maps

I'm new to using vuejs and I am currently experimenting with vue-google-maps in order to display markers. I am interested in learning how to customize the marker icon. I attempted to add an icon to the marker tag, but it did not have the desired effect. Below is my code:

Within my template, I have:

<marker :position.sync="m.position" :icon.sync="m.icon" v-for="m in markers"></marker>

And here is my script:

export default {
 data: function data() {
  return {
   center: { lat: 33.533818415851705, lng: -3.746186887500016 },
   zoom: 7,
   markers: [{position: { lat: 34.263, lng: -6.582 }, icon:"../assets/marker-icon.png"}]
   };}};

Could anyone provide some guidance on this matter?

javascriptvue.jsvue-component

Answer №1

Take a look at the bug here.

Also, check out this cool trick here

document.addEventListener('DOMContentLoaded', function() {
VueGoogleMap.load({
  key: 'AIzaSyAF2ndm4PTn52sqO8E2NW3bAULQu2-IQaw'
  });

  Vue.component('marker', VueGoogleMap.Marker);
  Vue.component('map', VueGoogleMap.Map);

  var map = new Vue({
    el: '#map',
    data: {
      center: {
        lat: 41.6005450,
        lng: -93.609
      },
      markers: [{
        position: {
          lat: 41.585095,
          lng: -93.624523
        }
      }]
    },
  });
 });
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
  <script src="https://rawgit.com/GuillaumeLeclerc/vue-google-maps/master/dist/vue-google-maps.js"></script>
  <div id="map">
    <map :icon="{path:'M55.296 -56.375v40.32q0 1.8 -1.224 3.204t-3.096 2.178 -3.726 1.152 -3.474 0.378 -3.474 -0.378 -3.726 -1.152 -3.096 -2.178 -1.224 -3.204 1.224 -3.204 3.096 -2.178 3.726 -1.152 3.474 -0.378 -3.78 0 6.912 1.404v-19.332l-27.648 8.532v25.524q0 1.8 -1.224 3.204t-3.096 2.178 -3.726 1.152 -3.474 0.378 -3.474 -0.378 -3.726 -1.152 -3.096 -2.178 -1.224 -3.204 1.224 -3.204 3.096 -2.178 3.726 -1.152 3.474 -0.378q3.78 0 6.912 1.404v-34.812q0 -1.116 0.684 -2.034t1.764 -1.278l29.952 -9.216q0.432 -0.144 1.008 -0.144 1.44 0 2.448 1.008t1.008 2.448z'}" style="height:500px;width:500px;display:block;" :center="center" :zoom="7">
      <marker v-for="m in markers" :position.sync="m.position" :clickable="true" :draggable="true" @g-click="center=m.center">
      </marker>
    </map>
  </div>
</body>

Answer №2

Currently facing an issue where setting the icon location to the object key url solves the problem for me, similar to the solution provided above;

For example;

{url: "../assets/marker-icon.png"}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the internal value to respond to modifications in the entire reference?

I possess a specific object... export class Note { type = '' id: string = v4() creationDate: string = DateTime.now().toISO() modificationDate: string = DateTime.now().toISO() text = '' title = '' tags: string[] = ...

vue.jsvue-componentvuejs3vue-composition-api

Problem with sliding image to the left

Is there a way to slide my image to the left when I click on the right arrow of the image slider? The current behavior is that the current image hides and the next image shows up, but without any sliding animation. $('#image-content img:first' ...

javascriptjqueryhtmlcssslide

A guide to efficiently managing updates and inserts with bulkCreate in node.js

Currently, I am utilizing node.js to facilitate the uploading of an excel file into a database. Furthermore, in my service, I am employing bulkCreate to efficiently upload the data into the mysql db. In order to provide more context, I will outline the str ...

javascriptnode.jsexpressbulk-create

Utilizing Header and Footer Components in React JS

I'm new to Reactjs(Nextjs) and I am looking to create a "header" and "footer" file that can be used on all pages. I would like to know the best approach to achieve this. Should I create a "Layout.js" file and then call the Header within it? Or should ...

javascriptreactjsnext.js

How to Display Element in Vue.js when Window.print is Triggered?

I'm wondering if it's possible to show a different message when a user tries to print my page. I currently have a 'Pay Now' button that isn't visible in the print preview. I'd like to display a text saying 'Visit www.exam ...

javascriptvue.jsprinting

The NextJS development server is frequently losing connection

Issue While working on my NextJS project, I've been experiencing occasional disruptions with my development server. Whenever I update my code, I encounter random occurrences of the dev server disconnecting and displaying the error message below: Type ...

javascriptnext.js

Transmit form information using jQuery's ajax JSON functionality

Hello, I am new to PHP/jquery and I have a question. I would like to know how to send JSON data from a form field (such as name, age, etc.) using AJAX in a JSON format. I have searched for relevant information on this but couldn't find anything concre ...

javascriptphpjqueryajaxjson

Override children component class names with Material UI Tooltip Component

Check out this example In this scenario, there are three visible buttons. The first button lacks a tooltip and changes color based on state and hover. The second button includes a tooltip but encounters issues with the className being overwritten, result ...

javascriptreactjsmaterial-ui

When working with Angular, encountering circular dependencies can occur when utilizing providedIn alongside forRoot

Currently, I am in the process of developing an angular library that includes an internal service. The service is defined as follows: I have utilized providedIn to ensure it is tree-shakable and did not opt for providedIn:'root' as it is solely u ...

javascriptangulartypescriptlazy-loadingtree-shaking

Exploring the contrast between web elements and ElementFinders in Protractor

After diving into the Protractor API documentation and watching a video on Youtube, I'm still unsure. Is ElementFinder a shortcut or pointer to webElement, and is Element an instance of a certain class that represents webpage elements? ...

javascriptnode.jstestingprotractor

Picture in the form of a radio button

Is there a way to use an image instead of a radio button in my AngularJS form? I have managed to hide the radio button using CSS, but it disables the checked event. How can I make the image clickable? position: absolute; left: -9999px; Here is the code s ...

javascripthtmlcssangularjs

Achieve multiple returns of a function by employing .fadeOut() iteratively instead of just once

I'm not sure if it's supposed to behave this way, but I believe it is... Initially, I thought there might be an issue with my entire script so I created a new file on localhost to test just the fadeOut(); function. To my surprise, the function ...

javascriptjquery

Resolving circular errors in ESLint with Prettier

I'm in the process of creating a Vue component. However, I've encountered an error: Type annotations can only be used in TypeScript files. If I remove the type clause, then I encounter: Missing return type on function. Here's how the comp ...

vue.jseslintprettier

The request to check the API at http://localhost/v5/api/checker returned a 404 error, indicating that

Trying to create a function that uses AJAX to call PHP, but encountering an error when clicking the button. Does anyone know how to solve this issue? Code provided below. PHP: $app->get('/checker', function () { $jsonContents = file_get_ ...

javascriptphpajaxslim

Setting attributes on dynamically appended elements using Jquery

Whenever a user clicks on another user's name, a popup will appear with a form to send a message to that specific user. The goal is to dynamically change the 'action' attribute to include the user's ID in the form submission URL. Althou ...

javascriptjquery

Using Ruby variable as a parameter in JavaScript

Is there a way to include a ruby variable as a parameter in a JavaScript function for a Rails checkbox? Here is an example of what I'm trying to do: <%= check_box_tag 'Sugestão', prato.id , prato.sugestao,:class => prato.categoria_pr ...

javascriptruby-on-railsruby

Issue with the side panel: unable to close it

There seems to be an issue with the close button on the sidebar—it's neither displaying nor functioning properly. The show sidebar feature works perfectly fine, but there is a problem with the closing function. Below is the HTML, CSS, and JavaScript ...

javascripthtmlsidebar

What is the issue with this code and why am I not receiving any error messages?

I am new to JavaScript and decided to do some practice. I wanted to create a webpage that allows users to select the number of products they want to buy, using plus and minus buttons. The program was supposed to increment or decrement the input value based ...

javascripthtmlcssweb

Is there a way to calculate the mean of radio buttons that each have their own distinct values?

My HTML page features a unique rating system created with radio buttons that resemble stars when filled in. The CSS styling gives them an appealing design. Additionally, I have included a submit button to display the selected star count when clicked. Here ...

javascript

Is a lack of return statement in sub-functions a problem? [JavaScript]

I am currently studying Chapter 3 on Functions from a book called "Eloquent JavaScript". Although I understand most of the code presented, one thing puzzles me. Why do the sub-functions within the code snippet not have return statements? var landscape = ...

javascriptfunctionreturn