GoogleMapsAPI로지도에 이미지와 텍스트를 설치해 보았습니다.

GoogleMapsAPI를 만져보고 싶었고 공식 사이트를 보면서지도에 여러 가지를 표시시켜 놀아 보았습니다.

이번에는 그 중에서 지도상에 임의의 이미지와 텍스트를 설치하는 방법을 소개하고 싶습니다.

GoogleMapsAPI란?

Google Maps API는 2005년 2월에 출시된 Google 지도의 API입니다.

고기능 Google 지도를 웹사이트나 앱에서 사용할 수 있어 지도상에서 다양한 표현을 할 수 있습니다.

지도에 임의의 이미지와 텍스트를 설치하는 방법

이번에는 아래 사진과 같이 지도상의 임의의 장소에 마커를 설치하고, mouseover하면 임의의 이미지와 텍스트가 표시된다는 움직임을 만들어 보고 싶습니다.



이러한 묘사를 재현하려면 정보창 라는 기능을 사용합니다.
우선은 GoogleMapAPI를 이용하기 위해서 아래의 script를 읽어들입니다.

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

※GoogleMapsAPI를 서버상에서 움직이는 경우는, APIkey가 필요하게 됩니다. APIKey 취득 방법은 아래에서 확인하시기 바랍니다.
참고 : Google Maps API 키를 손쉽게 검색

다음은 HTML 묘사. 지도를 보려는 위치를 div로 묶습니다.

<div id="map"></div>

width, height를 지정해 주지 않으면 맵이 표시되지 않으므로, css도 기술.

#map {
  width: 600px;
  height: 400px;
}

아래 준비가 끝나면 여기에서 맵을 표시하기 위한 script를 기술해 갑니다.
코드의 내용은 코멘트 아웃문을 참고해 주세요.

var map = null;
var infowindow = new google.maps.InfoWindow();

function init() {

  //マップの初期状態を設定
  var option = {
  zoom: 6,
  center: new google.maps.LatLng(35.4093320, 136.7566470),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true
  };
　
  // 吹き出しを閉じる処理
  map = new google.maps.Map(document.getElementById("map"), option);
  google.maps.event.addListener(map, "click", function() {infowindow.close();});

  // 任意の位置にマーカーを追加
  var point = new google.maps.LatLng(35.673264, 139.760668);
  var marker = create_maker(point, "info", "<img src='画像パス' /><br><p>テキスト</p>");

  var point = new google.maps.LatLng(34.6545182, 135.4289645);
  var marker = create_maker(point, "info", "<img src='画像パス' /><br><p>テキスト</p>");

  var point = new google.maps.LatLng(35.1709150, 136.8815369);
  var marker = create_maker(point, "info", "<img src='画像パス' /><br><p>テキスト</p>");
}

function create_maker(latlng, label, html) {
  // マーカーを生成
  var marker = new google.maps.Marker({position: latlng, map: map, title: label});
  // マーカーをマウスオーバーした時の処理
  google.maps.event.addListener(marker, "mouseover", function() {
  infowindow.setContent(html);
  infowindow.open(map, marker);
  });
}

google.maps.event.addDomListener(window, "load", init);

요약

간단하지만, 위와 같은 설명으로 GoogleMapAPI를 사용하여지도에 이미지와 텍스트를 설치할 수있었습니다.
콘텐츠 내에 지도를 사용하고 싶은 경우가 많이 있다고 생각하므로 GoogleMapAPI에서 다양한 표현을 하는 수단을 공부해 나가고 싶습니다.