Rotate Marker

[mirmousaviii]

I used image icons for marker with icon attribute, Can I rotate the marker icon?

gmap-marker:

        <gmap-marker
          v-for="m in markers"
          :key="m.id"
          :position="m.position"
          :icon="m.markerIcon"
        ></gmap-marker>

Marker Data:

  markers: [
          {
            id: "b1",
            position: {lat: 35.7728737, lng: 51.4158012},
            markerIcon: mapMarkerBlack,
            rotate: 30
          },
          {
            id: "b2",
            position: {lat: 35.7760000, lng: 51.4160000},
            markerIcon: mapMarkerSilver,
            rotate: 60
          },
          {
            id: "b3",
            position: {lat: 35.7780000, lng: 51.4190000},
            markerIcon: mapMarkerViolet,
            rotate: 120
          }

[xkjyeah]

No you can't do it directly, but there is a workaround:

1. Use a canvas to rotate the image
2. Extract the data URL from the canvas
3. Set the data URL as the image source of the icon

On 12 Apr 2017 21:03, "Mostafa Mirmousavi" [email protected] wrote:

I used image icons for marker with icon attribute, Can I rotate the marker icon?

gmap-marker:

    <gmap-marker
      v-for="m in markers"
      :key="m.id"
      :position="m.position"
      :icon="m.markerIcon"
    ></gmap-marker>

Marker Data:

markers: [ { id: "b1", position: {lat: 35.7728737, lng: 51.4158012}, markerIcon: mapMarkerBlack, rotate: 30 }, { id: "b2", position: {lat: 35.7760000, lng: 51.4160000}, markerIcon: mapMarkerSilver, rotate: 60 }, { id: "b3", position: {lat: 35.7780000, lng: 51.4190000}, markerIcon: mapMarkerViolet, rotate: 120 }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/93, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR_umwI3ENMfweOyuyDR-TUIE3in-ks5rvMu4gaJpZM4M7ZNh .

[mirmousaviii]

How can I use canvas marker with image?

[xkjyeah]

http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image

https://www.html5rocks.com/en/tutorials/canvas/performance/#toc-pre-render

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

On 13 Apr 2017 00:11, "Mostafa Mirmousavi" [email protected] wrote:

How can I use canvas marker with image?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/93#issuecomment-293628867, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR5Aca-DBOzSd00ii7doycYlUZEcTks5rvPfAgaJpZM4M7ZNh .

[anselmobattisti]

You can use to,

            icon: {
                url: formatfields.getUrlImgTipo(e.icone),
                scaledSize: new google.maps.Size(30, 48)
            },

[adavie1]

Apologies in advance for the really basic question- how are you changing the marker colour? I can see your icon assignment, where is mapMarkerSilver etc. coming from?

[redxtech]

@anselmobattisti I am thinking that you may have pulled that straight from google's API docs. As far as I know, vue-google-maps doesn't provide the google object, so you can'y use new google.maps.size(). If you know a way around this that would be greatly appreciated.

[xkjyeah]

Vue-google-maps provides the Google object.

https://github.com/xkjyeah/vue-google-maps/blob/vue2/API.md#loaded--promise

To use it, write:

import {loaded} from 'vue2-google-maps'

loaded.then(() => console.log(window.google))

On Mon, Jan 8, 2018 at 10:38 AM, Gabe Dunn [email protected] wrote:

@anselmobattisti https://github.com/anselmobattisti I am thinking that you may have pulled that straight from google's API docs. As far as I know, vue-google-maps doesn't provide the google object, so you can'y use new google.maps.size(). If you know a way around this that would be greatly appreciated.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/93#issuecomment-355874876, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR6X5kXbaNtsr-ypFOltev2tdaZJ8ks5tIX-bgaJpZM4M7ZNh .

[maitruonghcmus]

Hi, I can not rotate icon, does anyone can help me? How can I rotate icon with canvas in this code block below ?

<gmap-map :center="mapCenterPoint" :zoom="15" map-type-id="terrain" class="map">
      <gmap-marker :key="index" 
                    v-for="(v, index) in vehicles" 
                    v-if="v.waypoint !== null" 
                    :position="getLatLngFromWaypoint(v.waypoint)"
                    :title="v.plate",
                    :icon="getVehicleIcon(v.waypoint)"></gmap-marker>
</gmap-map>


getVehicleIcon(wp) {
      let onlineVehicle = "static/vehicleonline.png";
      let stoppedVehicle = "static/vehiclestopped.png";
      let offlineVehicle = "static/vehicleoffline.png";

      var url = "";
      if (wp.acc > 0) {
        if (wp.kmh > 5) {
          url = onlineVehicle;
        } else url = stoppedVehicle;
      } else {
        url = offlineVehicle;
      }

      return {
        url: url,
        scaledSize: new google.maps.Size(50, 50),
      };
    },

[eregnier]

Managing this in a marker sub component may be simpler. Have a look at https://github.com/eregnier/vue2-gmap-custom-marker

[ngjermundshaug]

A bit late to the party here - but this was pretty easy to du using jQuery and CSS. Note the use of v-once - this is critical in order to avoid flickering! It's ugly - but it works.

<GmapMap v-once ref="mapRef"  :center="{lat:10, lng:10}"  map-type-id="terrain"  style="width: 500px; height: 300px">
   <GmapMarker :icon="{ url: require('./assets/logo.png')}" :key="index" v-for="(m, index) in markers" :position="m.position"  /> 
</GmapMap>

markers:[
        {
          position:{
            lat: 60,
            lng: 10
         }
        }         
      ],


mounted(){
    let i = 0;
    setInterval(() => {
      $('img[src*="logo.png"]').parent().css('transform', 'rotate(' + i + 'deg)' );
      i += 10;
    }, 500);
}

[aphavichitr]

Managing this in a marker sub component may be simpler. Have a look at https://github.com/eregnier/vue2-gmap-custom-marker

Does your library support marker rotation? Didn't see it documented.

[ghedszxc]

Vue-google-maps provides the Google object. https://github.com/xkjyeah/vue-google-maps/blob/vue2/API.md#loaded--promise To use it, write: import {loaded} from 'vue2-google-maps' loaded.then(() => console.log(window.google)) … On Mon, Jan 8, 2018 at 10:38 AM, Gabe Dunn @.***> wrote: @anselmobattisti https://github.com/anselmobattisti I am thinking that you may have pulled that straight from google's API docs. As far as I know, vue-google-maps doesn't provide the google object, so you can'y use new google.maps.size(). If you know a way around this that would be greatly appreciated. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#93 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR6X5kXbaNtsr-ypFOltev2tdaZJ8ks5tIX-bgaJpZM4M7ZNh .

Is there a easiest way now how to rotate customize icon of marker?

[Danushka96]

This is a trick that can be used to rotate the markers https://betterprogramming.pub/dynamic-svg-markers-for-google-maps-in-vue-js-7541fa1a54a

And add the transform="rotate(degree)" to the svg