THE HAM MEDIA BLOG

æ“úAGoogle Map‚ð—˜—p‚·‚é‹@‰ï‚ª‚ ‚Á‚½‚Ì‚Å‚·‚ªAÅ‰‚Í’P‚É’n}‚ª‚ ‚ê‚΂¢‚¢‚Æ‚¢‚¤‚±‚Æ‚¾‚¯‚¾‚Á‚½‚悤‚Ȃ̂ŁAGoogle Map‚ÌAPI‚Æ‚©‚ð—˜—p‚¹‚¸‚ɁA’n}‚̉Eã‚É‚ ‚郊ƒ“ƒN‚̍쐬‚Å‚Å‚Ä‚­‚éiflame‚ð•\Ž¦‚³‚¹‚悤‚ÆŽv‚Á‚Ä‚¢‚½B

‚µ‚©‚µAAPI‚Ì—˜—p•û–@‚Á‚Ä‚Ç‚¤‚¾‚Á‚½‚©‚ȁ[H‚È‚ñ‚ÄŽv‚Á‚½‚̂ŁAˆÈ‘O—˜—p‚µ‚½‚±‚Æ‚ª‚ ‚Á‚½‚Ì‚Å‚·‚ªAÄ“x’²‚ׂĂ݂邱‚ƂɁB

¡‚̓o[ƒWƒ‡ƒ“‚ª‚R‚ào‚Ä‚¢‚é‚Ì‚Å‚·‚ªA‚»‚ê‚Í—˜—p‚µ‚½‚±‚Æ‚ª‚È‚©‚Á‚½‚̂ŁA‚»‚ê‚Ì—˜—p•û–@ƒƒ‚‚Å‚·B

Google Map API‚Ì—˜—p

ƒo[ƒWƒ‡ƒ“‚R‚©‚ç‚ÍAPIƒL[‚ª•s—v‚Æ‚Ì‚±‚ƁB—˜—p‚ªŠy‚É‚È‚Á‚Ä‚Ü‚·‚ˁB

‚Ü‚¸‚ÍMap‚ð—˜—p‚·‚邽‚߂̃‰ƒCƒuƒ‰ƒŠ‚̓ǂݍž‚Ý

<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false"></script>

ÅŒã‚Ìsensor‚ª•K{‚Æ‚Ì‚±‚ƂŁAGPS‚̂悤‚ȈʒuƒZƒ“ƒT[—˜—p‚·‚é‚à‚̂ŁAiPhone‚Ȃǂ̃‚ƒoƒCƒ‹ƒfƒoƒCƒX‚Å‚Ì—˜—p‚ª‚ ‚é‚È‚çtrue‚ðA‚»‚¤‚Å‚È‚¯‚Îfalse‚ð“ü‚ê‚Ä‚¨‚­‚Æ‚Ì‚±‚ƁB

“ü‚ê‚Ä‚¢‚È‚¢‚ƃGƒ‰[‚ª‚Å‚éB

Šî–{“I‚ÈJavaScript

window.onliad = gmap();
function gmap() {
        var mapdiv = document.getElementById('map');
    var myOptions = {
        zoom: ”’l(0`19),
        center: new google.maps.LatLng(ˆÜ“x, Œo“x),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
});

•\Ž¦‚³‚¹‚½‚¢‰ÓŠ‚ÌID‚ÌŽw’è‚ƁA•\Ž¦ˆÊ’u‚̈ܓx‚ÆŒo“x‚ÌŽw’èA•\Ž¦”{—¦‚ÌŽw’肾‚¯‚Å‚¢‚¢‚ñ‚Å‚·‚ˁBŒã‚Í•\Ž¦ˆÊ’u‚̃uƒƒbƒN‚É•‚ƍ‚‚³‚ðCSS‚Ȃǂł‚¯‚Ä‚¨‚­‚ƁB

ˆÈ‘O‚ÌAPIƒL[‚ð“ü‚ê‚È‚¢‚ÆŽg‚¦‚È‚¢Žž‚æ‚è‚àƒVƒ“ƒvƒ‹‚ÉŽg‚¢ˆÀ‚­‚È‚Á‚Ä‚¢‚é‚Ý‚½‚¢‚Å‚·‚ˁB

ƒ}[ƒJ[‚Ɛ‚«o‚µ

ƒ}[ƒJ[‚Ɛ‚«o‚µ‚ð‰Á‚¦‚éê‡‚́Aæ‚Ù‚Ç‚Ì“à—e‚ÉŽŸ‚Ì“à—e‚ð‰Á‚¦‚邾‚¯B

¡ƒ}[ƒJ[

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(ˆÜ“x, Œo“x),
    map: map, 
    title: 'ƒ}[ƒJ[‚̃^ƒCƒgƒ‹'
});

’n}ã‚ł̈ʒu‚ðŽ¦‚·ƒ}[ƒJ[‚ª•\Ž¦‚³‚ê‚é‚悤‚É‚È‚è‚Ü‚·B

¡‚«o‚µ

var infowindow = new google.maps.InfoWindow({
    content: 'î•ñƒEƒBƒ“ƒhƒE“à‚É•\Ž¦‚·‚éHTML',
    size: new google.maps.Size(•, ‚‚³)
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

jQuery‚̃vƒ‰ƒOƒCƒ“‚É‚µ‚Ä‚Ý‚½

ã‹L‚Ì‚±‚Æ‚Æ‚©‚𖈉ñ—˜—p•û–@‚ðl‚¦‚Ä‚¢‚é‚Ì‚à‘å•Ï‚Å‚·‚µAÅ‹ß‚ÍjQueryŽg‚¤ˆÄŒ‚΂©‚è‚Ȃ̂ŁAjQuery‚̃vƒ‰ƒOƒCƒ“‚É‚µ‚Ä‚Ý‚Ü‚µ‚½BƒVƒ“ƒvƒ‹‰ß‚¬‚é‚Ì‚Å‚·‚ªA’n}‚ð•\Ž¦‚³‚¹‚邾‚¯`‚È‚ñ‚ÄŽž‚É‚Í•Ö—˜‚©‚ȂƁB

jQuery Gmap3 (h2ham Version)

plugin‚Ì’†g

$.fn.gmap = function(latitude,longitude,set) {
    var set = $.extend({
        zoom: 15
    }, set)
    var mapdiv = $(this).get(0);
    var myOptions = {
        zoom: set.zoom,
        center: new google.maps.LatLng(latitude,longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
};

—˜—p•û–@

‚Ü‚¸‚ÍMap‚ð—˜—p‚·‚邽‚߂̃‰ƒCƒuƒ‰ƒŠ‚ÆjQuery‚ð“ǂݍž‚݁A‚¿‚å‚Á‚Æ‚µ‚½‹Lq‚ð‰Á‚¦‚邾‚¯¥¥¥‚Æ‚¢‚¤ƒVƒ“ƒvƒ‹‚È‚à‚́Bƒ}[ƒJ[‚¾‚µ‚½‚èAƒ}[ƒJ[“à‚̃eƒLƒXƒgŽw’è‚Å‚«‚½‚肵‚½‚ç‚à‚Á‚ƃvƒ‰ƒOƒCƒ“‚Á‚Û‚­‚È‚é‚Ì‚©‚Æ‚àŽv‚¤‚Ì‚Å‚·‚ªA‚Ü‚¸‚Í’n}‚ð•\Ž¦‚³‚¹‚邾‚¯‚ŁB

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap3.js"></script>
<script type="text/javascript">
$(function(){
    $('#gmap').gmap(latitude,longitude);
});
</script>

‚»‚ê‚ƁA•\Ž¦‚³‚¹‚邽‚߂ɁAã‹L‚Ì—á‚̏ꍇ‚́Aid="gmap"‚Æ‚¢‚¤ƒuƒƒbƒN‚ðì‚蕝‚ƍ‚‚³‚ðŽw’肵‚Ä‚¨‚­‚¾‚¯‚Å‚·B

¡ƒIƒvƒVƒ‡ƒ“

æ‚Ù‚Ç‚Ì•”•ª‚ðˆê•””²ˆBˆÜ“x‚ÆŒo“x‚ÌŽw’è‚Ì‘¼‚É‚àAzoom‚̃IƒvƒVƒ‡ƒ“‚¾‚¯‚‚¯‚Ä‚Ý‚Ü‚µ‚½BƒIƒvƒVƒ‡ƒ“•”•ª‚Í‚È‚­‚Ä‚à‚n‚jBƒfƒtƒHƒ‹ƒg‚Í15‚É‚È‚Á‚Ä‚¢‚Ü‚·B

$(•\Ž¦‚³‚¹‚éêŠ).gmap(ˆÜ“x,Œo“x,{zoom:”’l(0`19)});

¡Demo

‰º‚̃fƒ‚‚́u$('#map').gmap(43.068625,141.350801);v‚ð•\Ž¦‚µ‚½‚à‚Ì‚Å‚·B

¡Demo‚Q

‚»‚µ‚Ä‚±‚¿‚ç‚́u$('#map2').gmap(37.912027,139.061883,{zoom:13});v‚ƁA”{—¦‚ÌŽw’è‚à“ü‚ê‚Ä‚ ‚è‚Ü‚·B

ŽŸ‚Í‚à‚¤‚¿‚å‚Á‚Æ‹@”\‚𑝂₵‚Ă݂悤‚©‚ȁBjQuery‚ðŽg‚í‚È‚¢”Å‚àl‚¦‚Ă݂悤‚©‚ȁB