SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Anyone knows how to rotate icon ?

    Hi, I am having problem on my icon in google map,..I want to rotate it but i could not find solution on how to rotate the icon

    var rotatevalue = 215;//let says i want to rotate my marker at this given value.
    Code:
       for (var i = 0; i < pointsdata.length; i++) {
                           marker1 = new MarkerWithLabel({
                              position: new google.maps.LatLng(pointsdata[i].split(",")[0],pointsdata[i].split(",")[1]),
                              map: map,
                              icon: 'foldericon/'+myicon[i].split(","),
                              labelAnchor: new google.maps.Point(22, 0),
                              labelClass: "myclass",
                              labelStyle: {opacity: 1.0}
    
    
    
                          });

    Thank you in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi, I am having problem on my icon in google map
    A custom icon image cannot be rotated. If you want to rotate an icon then you will need to create it using SVG instead.

    Here's some good documentation on Google map symbols, and here's one on overlaying custom symbols on a map.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    A custom icon image cannot be rotated. If you want to rotate an icon then you will need to create it using SVG instead.

    Here's some good documentation on Google map symbols, and here's one on overlaying custom symbols on a map.
    Thank you paul, I will try this.

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found this but i am confuse how to get this work
    http://stackoverflow.com/questions/6...-google-map-v3

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    I found this but i am confuse how to get this work
    http://stackoverflow.com/questions/6...-google-map-v3
    Is the documentation from google about their own maps API any easier for you to follow?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Is the documentation from google about their own maps API any easier for you to follow?
    Hi paul, I tried the google map symbol https://developers.google.com/maps/d...ols#predefined
    and it works fine,but i need an icon that like car,person,that can be rotated just like the predefined icon in google map.


    Thank you in avdvance.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    but i need an icon that like car,person,that can be rotated just like the predefined icon in google map.
    Well done - so all you need is a SVG car or person now. It shouldn't be all that hard to source something like that.
    And if all else fails, you can create your own SVG images using this SVG editor too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Well done - so all you need is a SVG car or person now. It shouldn't be all that hard to source something like that.
    And if all else fails, you can create your own SVG images using this SVG editor too.
    Hi paul,

    Thank you so much for this editor...by the way is it possible to convert my png image car to svg then use it in google maps then it can be rotated also?

    Thank you in advance.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Thank you so much for this editor...by the way is it possible to convert my png image car to svg then use it in google maps then it can be rotated also?
    Yes, that is definitely something that can be done. You can have the image available in a separate window, and use the SVG editor to recreate it as a new image.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes, that is definitely something that can be done. You can have the image available in a separate window, and use the SVG editor to recreate it as a new image.
    Hi paul, i tried to convert my png to svg but the image is turns to black...what if we use the jqueryrotate plugin?...but the problem is that it requires an id element for IMG and for creating my icon marker in google map it has no id...I need to create an id to this marker dynamically so that i can rotate it..this is just my idea but i don't know this will gonna work.

    Code:
      iconmarker = new MarkerWithLabel({
                              position: new google.maps.LatLng(cords[i][0],cords[i][1]),
                              draggable: true,
                              raiseOnDrag: true,
                              map: map,
                              icon: 'images/'+icn[i],
                              labelContent: clientname[i],
                              labelAnchor: new google.maps.Point(22, 0),
                              labelClass: "markerclass",
                              labelStyle: {opacity: 1.0}
    
                          });
    can you please look at this example http://www.goprotravelling.com/..i think it uses an icon,there is a man walking,car and mortcyle.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    can you please look at this example http://www.goprotravelling.com/..i think it uses an icon,there is a man walking,car and mortcyle.
    Yes, they use an image, and an important aspect too is that they don't use the google API.

    You have two choices now - you can approach goprotravelling about the mapping solution that they have in place, or if you want to come back to using the google API you can come back to creating an SVG image using their easy to use SVG editor.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes, they use an image, and an important aspect too is that they don't use the google API.

    You have two choices now - you can approach goprotravelling about the mapping solution that they have in place, or if you want to come back to using the google API you can come back to creating an SVG image using their easy to use SVG editor.

    Hi paul,Thank you, I thought goprotravelling is using google map..I thinks i will just stick to google map.,but that's my i can't get my car to svg it turns to black..i keep trying in creating the svg but no luck .

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi paul,Thank you, I thought goprotravelling is using google map..I thinks i will just stick to google map.,but that's my i can't get my car to svg it turns to black..i keep trying in creating the svg but no luck .
    Well then, this is a good time to realise that it's best to take things in to your own hands and do it yourself. Get your artsy hat on and use the SVG editor to create the car from scratch.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Well then, this is a good time to realise that it's best to take things in to your own hands and do it yourself. Get your artsy hat on and use the SVG editor to create the car from scratch.
    Hello paul,can svg can copy the color of my car?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Hello paul,can svg can copy the color of my car?
    You can make it any color you want. Afterall, look at these SVG cars - some of them get pretty damn fancy.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You can make it any color you want. Afterall, look at these SVG cars - some of them get pretty damn fancy.
    Hi paul,thank you for this..but i think google map will not allow the multiple colors,because it only use the fillColor of the icon.
    under the
    google.maps.Symbol object specification
    https://developers.google.com/maps/d...nce#SymbolPath

  17. #17
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi paul, I inspect the element i found out that google map create img tag for my icon

    HTML Code:
    <img style="position: absolute; left: 0px; top: 0px; -moz-user-select: none; width: 48px; height: 48px; border: 0px none; padding: 0px; margin: 0px;" src="img/mycar.png" draggable="false">
    Is that possible now to put an id attribute on the img tag and use the https://code.google.com/p/jqueryrotate/ ?

    in my code

    Code:
     inside the forloop
        iconmarker = new MarkerWithLabel({
                              position: new google.maps.LatLng(cords[i][0],cords[i][1]),
                              draggable: true,
                              raiseOnDrag: true,
                              map: map,
                              icon: 'images/'+icn[i],
                              labelContent: clientname[i],
                              labelAnchor: new google.maps.Point(22, 0),
                              labelClass: "markerclass",
                              labelStyle: {opacity: 1.0}
    
                          });


    Thank you in advance.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Is that possible now to put an id attribute on the img tag and use the https://code.google.com/p/jqueryrotate/ ?
    Putting an id tag on it is still the wrong approach. If might be possible though be using $('img[src="img/mycar.png"]')
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •