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. <link rel="stylesheet" href="css/sample-5.css">
  8. <script src="http://maps.googleapis.com/maps/api/js"></script>
  9. <script src="js/sample-5.js"></script>
  10. </head>
  11. <body onload="initialize();">
  12. <div id="map_canvas"></div>
  13. </body>
  14. </html>
  1. /*
  2. * sample-5.css
  3. * 吹き出し(情報ウィンドウ)を出す
  4. */
  5. body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
  6. html, body, #map_canvas { width: 100%; height: 100%; }
  7. #infoWindow {
  8. width: 250px;
  9. }
  10. #infoWindow h1 {
  11. margin: 0 0 10px;
  12. font-size: 16px;
  13. }
  14. #infoWindow p {
  15. margin: 0;
  16. font-size: 12px;
  17. line-height: 1.6;
  18. }
  19. #infoWindow p span {
  20. font-size: 80%;
  21. }
  22. #infoWindow a {
  23. padding-right: 12px;
  24. border-bottom: 1px #593869 dotted;
  25. color: #593869;
  26. background: url(../img/external.gif) right center no-repeat;
  27. text-decoration: none;
  28. }
  29. #infoWindow a:hover {
  30. border: 0;
  31. color: #862682;
  32. background: url(../img/external_o.gif) right center no-repeat;
  33. }
  1. /*
  2. * sample-5.js
  3. * 吹き出し(情報ウィンドウ)を出す
  4. */
  5. function initialize() {
  6. var latlng = new google.maps.LatLng(35.681382, 139.766084);
  7. var myOptions = {
  8. zoom: 10,
  9. center: latlng,
  10. mapTypeId: google.maps.MapTypeId.ROADMAP
  11. };
  12. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  13. var content = '<div id="infoWindow">' +
  14. '<h1>情報ウィンドウ</h1>' +
  15. '<p>HTMLタグも使えます。<br>' +
  16. '<a href="http://cafe.lopan.jp/index8.html" target="_blank">Lopan cafe Webサイト<span>(未完成)</span>はこちら</a></p>' +
  17. '</div>';
  18. var infowindow = new google.maps.InfoWindow({
  19. content: content
  20. });
  21. var image = 'img/ico_lopan.png';
  22. var lopanMarker = new google.maps.Marker({
  23. position: latlng,
  24. map: map,
  25. icon: image,
  26. title: 'Lopan cafe'
  27. });
  28. google.maps.event.addListener(lopanMarker, 'click', function() {
  29. infowindow.open(map, lopanMarker);
  30. });
  31. }
  32. google.maps.event.addDomListener(window, 'load', initialize);