때로는 텍스트 베이스의 주소만 가지고 주소변환을 통해 구글맵을 표시해 주고 싶을 때가 있습니다. 그런 경우 간단히 사용할 수 있는 코드를 공유합니다.
1. HTML Part
<span class="need_to_convert">
NSW, Australia
</span>
먼저 위와 같이 주소를 wrapping 한 부분이 필요하고요,
2. jQuery Part
jQuery(document).ready(function($) {
$("span.need_to_convert").each(function(){
var embed_iframe = '<iframe width="400" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=' + encodeURIComponent( $(this).text() ) + '&output=embed"></iframe>';
});
$(this).html(embed_iframe);
});
저는 한 페이지에 여러개가 있을 경우를 대비해 jQuery를 이용해 Wrapper 의 클래스(need_to_convert)로 싸그리 찾아서 구글맵(Google Mpas) iFrame 으로 변환해 주었습니다.
실제로 위의 코드를 적용한 페이지입니다. -> 클릭