ホーム

JSでマーカーと吹き出しを出す方法 - Google Maps

0
0

元々Railsでアプリ作ってたのですがJavaScriptを使うのが早かった。 ***APIのキーは自分で取得

<script type="text/javascript">

function initMap() {
    var locations = [
         ['Title A', 3.180967,101.715546],
         ['Title B', 3.200848,101.616669],
         ['Title C', 3.147372,101.597443],
         ['Title D', 3.19125,101.710052]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 12,
         center: new google.maps.LatLng(3.171368,101.653404),
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow;
    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
             position: new google.maps.LatLng(locations[i][1], locations[i][2]),
             map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
             return function() {
                 infowindow.setContent(locations[i][0]);
                 infowindow.open(map, marker);
             }
        })(marker, i));
    }
}
</script>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOURAPIKEY=initMap">
</script>

<style type="text/css">
  #map { height: 400px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    width: 80%;}
</style>

<div id="map"></div>
Screen Shot 2018-10-22 at 12.20.42.png
Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-ホーム
-, ,

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.