Posted By

TumTum on 01/06/11


Tagged

google map V2 streetView


Versions (?)

Custom Icon for StreetView in GMap2


 / Published in: JavaScript
 

URL: http://img140.imageshack.us/i/googleidea.jpg/

Hi, I want to share my Code with the custom Icon for StreetView on the Map2. This Icon show the ViewPoint on the map.

Like: (http://img140.imageshack.us/img140/5558/googleidea.jpg "Perview")

The Source Route:
  • Get the CSS-Style Objekt form the GMarker on Map2 add put a CSS Background Image.
  • Change the CSS-Style Objekt if fire a GEvent:yawchanged from StreetView.

First we need the Orginal Image: http://maps.gstatic.com/intl/deALL/mapfiles/cb/modcbscout/cbscoutsprite003.png. Than we need a Transparnt Pix with size: 49px x 52px.

  1. /* Initialize GIcon: */
  2. {
  3. var gIcon = new GIcon();
  4. gIcon.image = "Transparnt.png";
  5. gIcon.iconSize = new GSize(49, 52);
  6. gIcon.iconAnchor = new GPoint(24, 33);
  7. }
  8. /* Initialize GMarker: */
  9. {
  10. var StvMarker = new GMarker(new GLatLng(x, y), {icon: gIcon});
  11.  
  12. // This is importet to set a id to find later the DOM-Objekt,
  13. // and Google set automatic a prefix 'mtgt_'
  14. StvMarker.id = "streetViewMan";
  15. map.addOverlay(StvMarker);
  16. }
  17. /* Initialize GEvent: */
  18. {
  19. var myPano = new GStreetviewPanorama(document.getElementById('streetView'), svOpts);
  20. GEvent.addListener(myPano, "yawchanged", function(yaw) {setCSSStyleIcon(yaw)} );
  21. }
  22.  
  23. /* AND NOW THE REALY CODE */
  24. function setCSSStyleIcon(yaw) {
  25. var iconMapURL = 'http://maps.gstatic.com/intl/de_ALL/mapfiles/cb/mod_cb_scout/cb_scout_sprite_003.png';
  26. //All the 16 Image Postion in iconMapURL
  27. var PicPx = [
  28. [-49, -711], // N
  29. [-00, -34],// NNO
  30. [-98, -711], // NO
  31. [-98, -365], // ONO
  32. [-00, -365], // O
  33. [-98, -417], // OSO
  34. [-98, -313], // SO
  35. [-98, -797], // SSO
  36. [-98, -150], // S
  37. [-00, -711], // SSW
  38. [-00, -417], // SW
  39. [-98, -000], // WSW
  40. [-49, -365], // W
  41. [-49, -417], // WNW
  42. [-49, -849], // NW
  43. [-00, -849]// NNW
  44. ];
  45.  
  46. var PicPos = PicPx[ Math.floor( yaw / 22.5 ) ]; //360 degree / 16 Images = 22.5 degree
  47. document.getElementById('mtgt_streetViewMan').style.background = "url("+iconMapURL+") "+PicPos[0]+"px "+PicPos[1]+"px";
  48. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: TumTum on January 6, 2011

Hi, I want to share my Code with the custom Icon for StreetView on the Map2. This Icon show the ViewPoint on the map.

Like:

The Source Route:

  • Get the CSS-Style Objekt form the GMarker on Map2 add put a CSS Background Image.
  • Change the CSS-Style Objekt if fire a GEvent:yawchanged from StreetView.

First we need the Orginal Image: http://maps.gstatic.com/intl/deALL/mapfiles/cb/modcbscout/cbscoutsprite003.png. Than we need a Transparnt Pix with size: 49px x 52px.

You need to login to post a comment.