内容
東京駅をcenterにしてiconを表示して、#map にgoogle map を出力するメモ
html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
var latitude = '35.681193';
var longitude = '139.767384';
var latlng = new google.maps.LatLng(latitude, longitude);
var zoom = 16;
var mapOption = {
center : latlng,
keyboardShortcuts : false,
mapTypeControl : false,
mapTypeId : google.maps.MapTypeId.ROADMAP,
streetViewControl : false,
zoom : zoom,
scrollwheel : true,
disableDoubleClickZoom : false,
draggable : true,
scaleControl : true,
zoomControl : true,
};
map = new google.maps.Map(document.getElementById('map'), mapOption);
marker = new google.maps.Marker({
map : map,
position : latlng,
url : '/img/map_icon.png',
scaledSize: new google.maps.Size( 50, 50 )
});
});
//]]>
</script>
</head>
<body>
地図:<div id="map" style="height: 400px; width: 800px; "></div>
</body>
</html>
各種パラメータは公式参照
https://developers.google.com/maps/documentation/javascript/tutorial