googleMapをページ内に表示
head内に下記のスクリプトを記述する。
緯度と軽度はhttp://www.geocoding.jp/より取得して
4行目の”var myLatlng = new google.maps.LatLng(緯度,経度)”に入れる。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> function initialize() { var myLatlng = new google.maps.LatLng(緯度,経度); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<div id="bodyContent">'+ '<p><img src="images/cake_shop.jpg" width="200" height="137" alt="ウォンツケーキ店" /></p>'+ '<p>ウォンツ県一途市三番町4-4-3<br />ケーキビル1F</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Uluru (Ayers Rock)' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } </script>
地図を表示したい場所に以下のコードを
<div class="googleMap"> <p id="map_canvas" style="width:100%; height:100%"></p> </div>
を記述する。