google maps apiのさわり

地図を表示するためにgoogle maps apiを使ってみる。

 

キーの取得(googleアカウントが必要)

developers.google.com

 

地図を表示するコード

.htmlで保存

<html>
<head>

<style type="text/css">
html { height: 80% }
body { height: 80%; margin: 0; padding: 0 }
#map_canvas { height: 80% }
</style>

 
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=&コピーしたキー=SET_TO_TRUE_OR_FALSE">
</script>

<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

 

地図が表示される。

f:id:umesann:20180407200129p:plain

 

住所検索についてはそのうち