더굿리뷰 - The Good Review > Google Maps
작성일자

주소 (Address)를 구글맵 (Google Maps) iFrame 으로 변환 jQuery

때로는 텍스트 베이스의 주소만 가지고 주소변환을 통해 구글맵을 표시해 주고 싶을 때가 있습니다. 그런 경우 간단히 사용할 수 있는 코드를 공유합니다.

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() ) + '&amp;output=embed"></iframe>';
	});

	$(this).html(embed_iframe);
});

저는 한 페이지에 여러개가 있을 경우를 대비해 jQuery를 이용해 Wrapper 의 클래스(need_to_convert)로 싸그리 찾아서 구글맵(Google Mpas) iFrame 으로 변환해 주었습니다.

실제로 위의 코드를 적용한 페이지입니다. -> 클릭