内容

東京駅を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