JavaScript + Ajax 実践サンプル集 - jQueryのgoogleMapsプラグインでカスタムマーカーを表示する

jQueryのgoogleMapsプラグインでカスタムマーカーを表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのgooglMapsプラグインを利用してカスタムマーカーを表示します。
※IEではカスタムマーカーが正常に表示されません。

$('#canvas').googleMaps({
  depth: 18,
  markers: {
    latitude: 35.658632,
    longituge: 139.745411,
    icon: {
      image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
      shadow: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
      iconSize: '12, 20',
      shadowSize: '22, 20'           
    }
  }
})

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery googleMaps - Custom Marker </title>  
  <style type="text/css">
  #canvas { width: 100%; height: 100%; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAoyWSbUNgj08W-uYPKn3CyBSef-zXCpKNiCIGTuSg9AsROHC20BQxAFgVm0YubP8ek0JmO76v_gGAsw" type="text/javascript"></script>
  <script src="ajax/googleMap2/jquery.googlemaps.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#canvas').googleMaps({
        depth: 18,
        markers: {
          latitude: 35.658632,
          longituge: 139.745411,
          icon: {
            image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
            shadow: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
            iconSize: '12, 20',
            shadowSize: '22, 20'           
          }
        }
      });
  });
  </script>
</head>
<body>
  <div id="canvas"></div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのgoogleMapsプラグインでカスタムマーカーを表示する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのgoogleMapsプラグインでカスタムマーカーを表示する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!