구글맵(Google Map)에 InfoWindow 만들기

자신의 web-page에서 구글맵(Google Map)을 사용하기 위해서는 먼저
https://developers.google.com/maps/documentation/javascript/get-api-key
를 방문하여 자신의 "API key"를 얻어야 합니다.
이 web-page에서 "Get a Key "라는 button을 누르면 됩니다.

InfoWindows 만들기
아래와 같이 new google.maps.InfoWindow함수의
content에 적당한 Text를 써넣기만 하면 됩니다.

여러 web-page를 한번에 보면 InfoWindow가 안 보입니다.
왼쪽 MENU에서 하나씩 보세요

Source

<div id="infoMap" style="width:100%;height:500px;"><div>

<script>
function myMap() {
  var myCenter = new google.maps.LatLng(37.5753959,126.9712319);
  var mapCanvas = document.getElementById("infoMap");
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
  * maker에 관해서는 구글맵(Google Map)에서  Maker사용하기 참조
  marker.setMap(map);
  
  var infowindow = new google.maps.InfoWindow({
    content: "안녕 여러분!<br/><b>대한민국 수도</b>"
  });
  infowindow.open(map,marker);
}
</script>

<script>
src="https://maps.googleapis.com/maps/api/js?key=자신의 key &callback=myMap
</script>
// 자신의 key는 다음 web-page에서 얻는다
// https://developers.google.com/maps/documentation/javascript/get-api-key
// 마지막으로 callback함수로 위에서 만든 myMap를 대입!!!

Result

여러 web-page를 한번에 보면 InfoWindow가 안 보입니다.
왼쪽 MENU에서 하나씩 보세요