1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  6. <title>アイコンと画像を別々にする利点</title>
  7. <style>
  8. body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
  9. html, body, #map_canvas { width: 100%; height: 100%; }
  10. </style>
  11. <script src="http://maps.googleapis.com/maps/api/js"></script>
  12. <script>
  13. function initialize() {
  14. var latlng = new google.maps.LatLng(35.681382, 139.766084);
  15. var myOptions = {
  16. zoom: 10,
  17. center: latlng,
  18. mapTypeId: google.maps.MapTypeId.ROADMAP,
  19. scrollwheel: false
  20. };
  21. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  22. /* アイコン設定 */
  23. var icon = new google.maps.MarkerImage('img/ico_lopan2.png',
  24. new google.maps.Size(82,42),
  25. new google.maps.Point(0,0),
  26. new google.maps.Point(31,42)
  27. );
  28. var shadow = new google.maps.MarkerImage('img/ico_lopan2.png',
  29. new google.maps.Size(82,42),
  30. new google.maps.Point(0,42),
  31. new google.maps.Point(31,42)
  32. );
  33. var markerOptions = {
  34. position: latlng,
  35. map: map,
  36. icon: icon,
  37. shadow: shadow,
  38. title: 'クリックすると跳ねます',
  39. draggable: true,
  40. animation: google.maps.Animation.DROP
  41. };
  42. var marker = new google.maps.Marker(markerOptions);
  43. google.maps.event.addListener(marker, 'click', toggleBounce);
  44. function toggleBounce() {
  45. if (marker.getAnimation() != null) {
  46. marker.setAnimation(null);
  47. //marker.setTitle('クリックすると跳ねます');
  48. } else {
  49. marker.setAnimation(google.maps.Animation.BOUNCE);
  50. //marker.setTitle('もう一回クリックすると止まります');
  51. }
  52. }
  53. }
  54. </script>
  55. </head>
  56. <body onload="initialize();">
  57. <div id="map_canvas"></div>
  58. </body>
  59. </html>