タグ: googlemap

/カスタムフィールドからgooglemapの経度緯度を取得し　入れるコード

//カスタムフィールドからgooglemapの経度緯度を取得し　入れるコード
function replace_post_address($id) {
    $post = get_post($id);
    // post_typeを判定(post, page, カスタム投稿)
    if( $post->post_type == 'shop' ){
	    $custom_fields = get_post_custom($id);
	    $custom_field_address = $custom_fields['所在地'];
	    $googleMapsApiData = json_decode(@file_get_contents('http://maps.google.com/maps/api/geocode/json?sensor=false&address='.urlencode($custom_field_address[0])),ture);
		//緯度経度を取得
$lat = $googleMapsApiData['results'][0]['geometry']['location']['lat'];//コレが緯度
$lng = $googleMapsApiData['results'][0]['geometry']['location']['lng'];//コレが経度

		// カスタムフィールド(_lat)がセットされているか
    	if (isset($custom_fields['_lat'][0])) {
			update_post_meta($id, '_lat', $lat);
    	} else {
    		add_post_meta($id, '_lat', $lat);
    	}

    	if (isset($custom_fields['_lng'][0])) {
			update_post_meta($id, '_lng', $lng);
    	} else {
    		add_post_meta($id, '_lng', $lng);
    	}
    }
}
add_action( 'wp_insert_post', 'replace_post_address' );

参考

http://com4tis.net/wordpress-customfield-use-customfield-register/
http://www.sandalot.com/wordpress%E3%81%A7%E6%96%B0%E8%A6%8F%E6%8A%95%E7%A8%BF%E6%99%82%E3%80%81%E5%88%A5%E3%81%AA%E6%8A%95%E7%A8%BF%E3%82%82%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
http://smkn.xsrv.jp/blog/2012/12/post-number-to-latlng-with-google-maps-ap/
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/update_post_meta

http://easyramble.com/wordpress-meta-keywords-with-custom-field.html

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_post_meta

googlemap レスポンシブ

<div class="ggmap">iframeのコピーしたコード</div>

http://inthecom.net/?p=718
参考

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

おれはこうしあt

.ggmap {
position: relative;
/*padding-bottom: 36%;*/
padding-bottom:326px;
padding-top: 30px;
height: 0;
overflow: hidden;
width:44%;
float:right
}

googlemap apiにて地図を表示する方法

apiキーは登録せず

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

apiあれば
詳しく説明
http://syncer.jp/google-maps-javascript-api-matome

<head>
	<script src="http://maps.googleapis.com/maps/api/js?key={APIキー}&sensor=false"></script>
</head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
//キャンパスの要素を取得する
var canvas = document.getElementById( "gmap" );

//中心の位置座標を指定する
var latlng = new google.maps.LatLng( 35.2732709,136.7873687 );

//地図のオプションを設定する
var mapOptions = {
	zoom: 18 ,				//ズーム値
	center: latlng ,		//中心座標 [latlng]
	scrollwheel: false //スクロール禁止
};

//[canvas]に、[mapOptions]の内容の、地図のインスタンス([map])を作成する
var map = new google.maps.Map( canvas , mapOptions );


// マーカー
new google.maps.Marker({
  position: new google.maps.LatLng( 35.2732709,136.7873687),
  map: map,
 // icon: "v.png"
});
</script>


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



<!--
<iframe width="100%" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=愛知県一宮市大和町南高井宮腰72&amp;z=14&amp;scrollwheel=false&amp;output=embed&iwloc=B"></iframe>

-->
</div>

参考http://www.nanchatte.com/map/MarkerImage.html