lunaluna
3/22/2014 - 6:13 AM

【WordPress】カスタムフィールドに入力された住所からGoogleMapを描画

【WordPress】カスタムフィールドに入力された住所からGoogleMapを描画

<?php
	$map_address = get_post_meta($post -> ID, 'googlemap_address', true);
	$map_marker = get_post_meta($post -> ID, 'googlemap_label', true);

	$map_address = esc_html( $map_address );
	$map_address = mb_convert_kana( $map_address, "nKV", "UTF-8" );
	$map_address = urlencode( $map_address );

	$api_uri = 'http://maps.googleapis.com/maps/api/geocode/json?address='. $map_address .'&sensor=false';
	$json = file_get_contents($api_uri, true);
	$array = json_decode( $json, true );

	$code = $array[status];

	if ( $code == 'OK' ) {
		$latitude = $array[results][0][geometry][location][lat];
		$longitude = $array[results][0][geometry][location][lng];

		$coordinates = $latitude. ',' . $longitude;
	} else {
		$coordinates = false;
	}

	$map_magnification = get_post_meta($post -> ID, 'googlemap_magnification', true);
?>

	<script>
		var map;
		var latitude = Number("<?php echo $latitude; ?>");
		var longitude = Number("<?php echo $longitude; ?>");
		var magnification = Number("<?php echo $map_magnification; ?>");
		var centerPosition = new google.maps.LatLng(latitude, longitude);
		function initialize() {
			var mapOptions = {
				zoom: magnification,
				center: centerPosition,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById('map_area'), mapOptions);

			// マーカー追加
			var marker = new google.maps.Marker({
				position: centerPosition,
				map: map,
				title : "<?php echo $map_marker; ?>"
			});
		}

		google.maps.event.addDomListener(window, 'load', initialize);
	</script>

	<div id="map_area" class="googlemap"></div>