본문 바로가기
아두이노

아두이노 이더넷 웹서버 만들기 -#14

by 오징어땅콩2 2020. 5. 19.
반응형

구글맵을 보여주는 HTML이다. 
구글에서 구글맵 HTML이라고 입력해도 아주 흔하게 나오는 HTML 코드이다. 
구글맵도 유료화 하고 있어서 그런지 버전마다 약간씩 다르다. 
그래도 아직 무료로 되는 부분이 많으니 그냥 연습삼아 하자.
그런데 한가지 고민스러운게 있다.
아두이노 ESP8266으로 시작 했다면 구글맵 연동이 그냥 한번해 보기 좋은 주제다.
그런데 시작을 이더넷으로 했다. 
이더넷 특성상 뭐 이동을하지 못한다.
그래도 ESP8266동 동일 하니 한번 맛이나 보고 가자.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ko"></script> 

<script  type="text/javascript"> 

 

function initalize() {

    var mapOptions = {

      zoom: 15,

      center: new google.maps.LatLng(36.4251083, 127.389638),

      disableDefaultUI: true,

      mapTypeId: google.maps.MapTypeId.ROADMAP,

      draggable: false

    }

 

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    var marker = new google.maps.Marker({map: map, position: map.getCenter()});

}

</script> 

<title> Google Map JavaScript API </title>

</head>

<body onload="initalize()">

    <div id="map_canvas" style="width: 640px; height: 480px; margin: 0 auto; top:50px; border: 1px solid black;"> </div>

</body>

</html>

 

 

 

Colored by Color Scripter

 

 

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="euc-kr">

    <title>구글맵 API 활용하기</title>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>

        function initialize() {

            var X_point            = 127.389638;        // X 좌표

            var Y_point            = 36.4251083;        // Y 좌표

            var zoomLevel        = 16;                        

            var markerTitle        = "arduino map";                

            var markerMaxWidth    = 300;                    

            var contentString    = '<div>' +

            '<h2>아두이노학습용</h2>'+

            '<p>구글검색으로 나오는맵입니다.<br />' +

            '</div>';

            var myLatlng = new google.maps.LatLng(Y_point, X_point);

            var mapOptions = {

                                zoom: zoomLevel,

                                center: myLatlng,

                                mapTypeId: google.maps.MapTypeId.ROADMAP

            }

            var map = new google.maps.Map(document.getElementById('map_view'), mapOptions);

 

            var marker = new google.maps.Marker({

                                                    position: myLatlng,

                                                    map: map,

                                                    title: markerTitle

            });

 

            var infowindow = new google.maps.InfoWindow(

                                                        {

                                                            content: contentString,

                                                            maxWidth: markerMaxWidth

                                                        }

            );

 

            google.maps.event.addListener(marker, 'click', function() {

                infowindow.open(map, marker);

            });

        }

    </script>

</head>

 

<body onload="initialize()">

    <div id="map_view" style="width:800px; height:600px;"></div>

</body>

</html>

 

Colored by Color Scripter

 

 

저작자표시 비영리 변경금지

'아두이노' 카테고리의 다른 글

아두이노 이더넷 웹서버 만들기 -#16  (0) 2020.05.19
아두이노 이더넷 웹서버 만들기 -#15  (0) 2020.05.19
아두이노 공부하다가 포기 하는 사람을 위한 글....  (0) 2020.05.12
아두이노 이더넷 웹서버 만들기 -#13  (0) 2020.05.04
아두이노 이더넷 웹서버 만들기 -#12  (0) 2020.05.03

관련글

댓글

티스토리툴바