01/07(Tue) 09:46
�� Google�}�b�v V3 �ݒu�@ �` Google Maps API V2 ���� V3 �ւ̈ڍs���@
2009/5/27�� Google Maps API V3 �����J����AV2 �̐����T�|�[�g�� 2010/5/19�ɏI�����܂������A2013/5/19(��1)�܂ł͈��������@�\����Ƃ̂��ƂŁA������ Google Maps API V2 �̂܂�����������uGoogle�}�b�v�����p���悤 �v�uGPS���K�[���L�^ �v�u������}�b�v �v�n�}�\���y�[�W�� V3 �Ɉڍs���邱�Ƃɂ��܂����B�i2013.3.19�쐬�j
�i��1�j�i2013.5.1�NjL�j2013/5/1��2013/11/19�܂Ŕ��N�ԉ��� �̃A�i�E���X�B���̓��ȍ~�� V2 ���g���Ă���n�}�́AJavaScript ���b�s���O�ɂ�鉺�ʌ݊��@�\���������� V3 �̒n�}�Ɏ����I�ɐ�ւ��B�啔���̃V���v���Ȓn�}�͋@�\���邻���ł���(��2)�A���̊Ԃ� V3 �ֈڍs���邱�Ƃ������������Ă��܂��B
�i��2-1�j�i2013.11.20�NjL�j���z�[���y�[�W���� Google�}�b�v V2�n�} �� 2013.11.19�܂ł͕\���ł��܂������A11.20�ɂ͑S�ĕ\���ł��Ȃ��Ȃ�܂����BV3 �� JavaScript wrapper�Łu�啔���̃V���v���Ȓn�}�͕\���ł���v�͂��ł����A�����͕s���ł��B
�i��2-2�j�i2013.11.21�NjL�j��11/21���� V2 �\�[�X�� V3 �ŕ\�� �����悤�ɂȂ�܂����B�}�[�J�[����E�B���h�E�̉e�摜���\������Ȃ�(��3)�A�n�}�g�厞�� V2/V3 �̎d�l���iV2�͏��E�B���h�E�̈ʒu�Œ�Ŋg��AV3�͒n�}���S�Œ�Ŋg��j�ɂ����E�B���h�E�̔z�u�����A�}�[�J�[���������ƃ��b�s���O�ɂ��\���Ɏ��Ԃ��|����Ȃǂ���܂����B
(��3)�i2013.11.26�NjL�j2013.11.15�ɁA�n�}�̊O�ς���V�����i�r�W���A�� ���t���b�V���jv3.14�����������[�X����A���r�W���A���iv3.13�j�ŕ\������Ă����}�[�J�[����E�B���h�E�̉e�摜�́A�ݒ肵�Ă��S�Ė��������悤�ɂȂ�܂����B ���@�ڍׂ͂����� �@�@�@�@�@
�y�@�ځ@���@�z
Google Maps API V3�̎�ȕύX�_
V3�Ŋ�{�I�Ȓn�}��\������菇
�T�C�h�o�[�t�� Google�}�b�v v3 �n�}
�m���Ă���ƕ֗��� Tips
�n�}�̃R���g���[��
���E�B���h�E�����1�̂ݕ\��
���E�B���h�E���\��
�n�}��N���b�N�ŏ��E�B���h�E���\�� etc
�J�X�^���A�C�R���̍쐬���@
XML�t�@�C���̓ǂݍ��݃��C�u�����[
Google Maps visual refresh�i�V�r�W���A���j�iv3.14�j
�i�����h�L�������g�j
�EUpgrading Your Google Maps JavaScript Application To v3 �Fv2����v3�ւ̕ύX���@�i�p���j
�EGoogle Maps JavaScript API v3 �i���{��j
�i�Q�l�h�L�������g�j
�EGoogle Maps API Version3 ���{��h�L�������g �AGoogle Maps����(Google Maps JavaScript API V3) �AGoogle Maps ���p�u�� �A�t����Google Maps API���t�@�����X ver 3
�E�u�T�C�h�o�[�t�� Google�}�b�v v3 �n�}�v�́Athe Google Maps API v3 �T���v�������N�W �� Mike Williams' tutorial Part 25 Marker Categories ��v3�ֈڍs�����T���v�� translated to v3 ���Q�l�ɂ��Ă��܂��i�p���j
�i���y�[�W���Q�l�� V3�n�}���쐬���ꂽ�T�C�g�l�̏Љ�j
�E�{��IT�u���O �����ɒ��ԏ�}�b�v
�X�|���T�[�����N
�� Google Maps API V3�̎�ȕύX�_
API�L�[���s�v
V2�܂ł́AGoogle Maps API ���g�����߂ɂ� API�L�[ ���擾����K�v������܂������AV3�ł͕s�v�ɂȂ�܂����B
�X�}�[�g�t�H�������@�\�̏[��
�X�}�[�g�t�H���A�v���ɂ͗��p�҂̈ʒu�����g�p������̂�����A�ʒu���m�Z���T�[(GPS�Ȃ�)���g�p���邩�ǂ������usensor�v�p�����[�^�Ŏw�肵�܂��B
Google Maps API �̗��p���ꕔ�L�����i2012/1/1���j�`Internet Watch�i2011/10/28�j
1���������API�Ăяo���� 25,000�r���[/�T�C�g ����ꍇ�A���ߕ��ɑ��ĉۋ����s����Ƃ������̂ł����A�l�T�C�g�ł̎g�p�ł�����܂Œʂ薳���Ŏg�p�ł���ƍl���č����x���Ȃ��ł��傤�B
�v���O���~���O�֘A�̕ύX
���� �ύX�_
google.maps���O��Ԃ̓��� V2�܂ł̓O���[�o����Ԃ� GMap2�AGMarker �Ƃ����N���X���z�u����Ă������AV3����͂��ꂼ�� google.maps.Map�A google.maps.Marker �ƂȂ��Ă���B����ɂ��킹�Ă��������\�b�h��v���p�e�B���ύX����Ă���B
�}�b�v�̕`����@���ȗ������ꂽ �]���̂悤�Ƀv���p�e�B�����ݒ肵�Ă������@����A�e��I�v�V�������ꊇ���Đݒ肷����@�ɕς�����B
�}�[�J�[/���E�B���h�E�̕`����@���ȗ������ꂽ �}�b�v�`��Ɠ��l�A�e��I�v�V�������ꊇ���Đݒ肷����@�ɕς�����B
���\�b�h�����ς�������� GMap2() �� google.maps.Map() GLatLng() �� google.maps.LatLng() GIcon() �� google.maps.MarkerImage() GMarker() �� google.maps.Marker() GMarker.getLatLng() �� marker.getPosition() marker.setPoint()/getPoint() �� marker.setPosition()/getPosition() GInfoWindow() �� google.maps.InfoWindow() openInfoWindowHtml() �� google.maps.InfoWindow() closeInfoWindow() �� infoWindow.close() GEvent.addListener() �� google.maps.event.addListener() GEvent.trigger() �� google.maps.event.trigger() Gmapload() �� google.maps.event.addDomListener(window, 'load', initialize) GPolyLine() �� google.maps.Polyline() GeocoderClient.getLocations() �� Geocoder.geocode() �@�Ȃ�
���\�b�h������������ map.setCenter()�Amap.getCenter() map.setZoom()�Amap.getZoom() map.setBounds()�Amap.getBounds()
�p�����[�^��������� map.setCenter(���S���W,�Y�[��) �� map.setCenter(���S���W)�{map.setZoom(�Y�[��)
���\�b�h�������Ȃ������� GBrowserIsCompatible()�i�u���E�U��Google�}�b�vAPI�𗘗p�ł��邩��j GUnload()�i�I�����Ƀ��������J���j����2��V3�ł͎g�p���Ȃ��̂Ŗ��Ȃ��B
map.showControls()�Amap.hideControls()�i�}�b�v�R���g���[���̕\��/��\���j addOverlays()�AclearOverlays()�i���L�Q�Ɓj GDownloadUrl()�AGXml.parse()�i���L�Q�Ɓj
�}�b�v��̃I�u�W�F�N�g���폜���郁�\�b�h���p�~���ꂽ V2�̕`��ς̃}�[�J�[����E�B���h�E�Ȃǂ��ꊇ�폜���郁�\�b�h clearOverlays() ���p�~���ꂽ�B����ɁA�X�Ƀ}�[�J�[���\���imarker.setVisible(false)�j�A���E�B���h�E���N���[�Y�iinfoWindow.close()�j�Ȃǂ��ē��l�̏�������������B
XML�t�@�C���̓ǂݍ��݊���XML�p�[�T�[�̃��C�u�����[���Ȃ��Ȃ��� V2�́AGDownloadUrl�� �� GXml.parse �Ȃǂ��Ȃ��Ȃ����B�f�[�^�x�[�X����}�[�J�[�𗧂Ă����ꍇ�Ȃǂ� jQuery ��JavaScript���C�u�����[�𗘗p�� JSON�t�@�C������ǂݍ��ݏ�������i���y�[�W�ł� XML�t�@�C���̓ǂݍ��݃��C�u�����[ downloadxml.js �𗘗p���A�n�}�f�[�^�� XML�t�@�C����ǂݍ��ݏ������Ă���j�B
�����̏��E�B���h�E�\�� V2�ł͒n�}���1�������E�B���h�E��\���ł��Ȃ��������AV3����͕����̏��E�B���h�E��\���ł���悤�ɂȂ����B
�}�b�v�R���g���[�� V2�Ŏg�p�ł����i�r�Q�[�V�����R���g���[���̓T�|�[�g�I���ƂȂ�A�Y�[���R���g���[���ƈړ��R���g���[���ɕ������ꂽ�B
�X�g���[�gView�̓������ȒP�ɂȂ��� google.maps.Map�N���X���X�g���[�gView���T�|�[�g����̂ŁAMap�N���X�̏��������Ƀv���p�e�B�ŁustreetViewControl: true�v���w�肷�邾���ŃX�g���[�gView���g�p�ł���悤�ɂȂ����B
�i���j�I�u�W�F�N�g�ɂ́A�N���X�i���I�u�W�F�N�g�̎�ށj�ƃC���X�^���X�i���N���X�ɑ�����I�u�W�F�N�g�̋�̗�j������A���\�b�h�͊��A�v���p�e�B�̓I�u�W�F�N�g�ŗL�̃f�[�^��\���܂��B
�� V3�Ŋ�{�I�Ȓn�}��\������菇
V3�̑g�ݍ���
HTML�̃w�b�_�[���� Google Maps API V3�̃��C�u������g�ݍ��݂܂��BV3�����API�L�[�w�肪�s�v�ɂȂ�AGoogle Maps API V3�̃��C�u�����g�ݍ��݂� sensor/region �p�����[�^�w��ɕύX�ƂȂ�܂����B
sensor= �ɂ́AiPhone/Android/�^�u���b�g�[���ȂLjʒu���m�Z���T�[�iGPS�Ȃǁj���������T�C�g�����Ȃ� true�A��ʓI�ȃp�\�R���T�C�g�����ɒn�}��\������ꍇ�� false���w�肵�܂��i�K�{�j
region= �͑Ώےn����w�肷����̂ŁA�f�t�H���g�ł�API�̃��[�h���̃h���C�������g�p���܂����Aregion �w�������Ǝw�肵�� region ��Ώےn��ɂ��܂��i�C�Ӂj
�n�}�̕\��
�����āA�y�[�W���[�h���Ɏ��s���郁�\�b�h�uaddDomListener()�v�̒��ɁA�n�}��\�����邽�߂�JavaScript��lj����܂��B�R�[�h���́udiv�v�f��ID�v�ɂ́A�菇4�ō�� div�v�f��ID�������܂��B�Y�[�����x���i0�`19�j�A�n�}�̒��S�ʒu�i�ܓx�ƌo�x�j�A�}�b�v�^�C�v��3�͕K�{���ڂł��B
�}�[�J�[�Ə��E�B���h�E�̕\��
�n�}��̃}�[�J�[���N���b�N�����Ƃ��ɏ��E�B���h�E��\������ɂ́A�u�n�}�̕\���v�̎��Ɂu�}�[�J�[�̕\���v�Ɓu�}�[�J�[�N���b�N�ŏ��E�B���h�E���J���v��JavaScript��lj����܂��B
�\���G���A�iV2 �Ɠ����L�q�j
���ɁA�y�[�W��HTML�̒��ɁA�n�}��\�����邽�߂� �\���G���A�idiv�v�f�j��lj����܂��Bdiv�v�f�ɂ�ID������ݒ肵�A�X�^�C���V�[�g��width��height�Œn�}�̃T�C�Y���w�肵�܂��B
�ȏ���܂Ƃ߂�ƈȉ��ɂȂ�܂��i�n�}�͉E�}�j�B�\�[�X���̃R�����g�ԍ��͏�L�菇�̍��ڔԍ��ƑΉ����Ă��܂��B
�n�}�T�C�Y250x210�Ȃ̂ŁA�u�ړ��R���g���[���v�u�Y�[�� �R���g���[���v�u�}�b�v�^�C�v �R���g���[���v�͂��ꂼ��u��\���v�u�{�^���v�u�v���_�E���v�������I������܂��B
���E�B���h�E�̍ő啝�̐ݒ�����ĂȂ��̂ŁA�n�}�̉��������ς��܂ōL�����Ă��\��������Ȃ����́A�����I�ɐ܂�Ԃ����s���A����ł��I�[�o�[�t���[����ꍇ�́A�c�����X�N���[���ŕ\������܂��B
�� �����̃}�[�J�[�Ə��E�B���h�E�̕\��
�P�̃}�[�J�[�ɏ��E�B���h�E��\�����鎞�͏�L�菇�ɂȂ�܂����A�����̃}�[�J�[���쐬�����ꂼ��ɏ��E�B���h�E��\������ꍇ�́A�X�̃}�[�J�[�̏��E�C���h�E���ʁX�̃C���X�^���X�ɂȂ�l�Ɂu�i3-2�j�}�[�J�[�N���b�N�ŏ��E�B���h�E���J���v���ЂƂ̊��Ƃ��ēƗ�������K�v������܂��B
���Ƃ��ēƗ������Ȃ��� for���[�v���� addListener() ���ĂԂƁA�e�}�[�J�[�͕\������܂����Aclick�C�x���g���Ăꂽ���ɂ́A����for���[�v�͏I����Ă���̂ŏ�� for���[�v�̍Ō�̒l�ƂȂ�A�ǂ̃}�[�J�[���N���b�N���Ă��Ō�̃}�[�J�[�ɂ��̏��E�C���h�E���\������Ă��܂��܂��B
���̒n�}�� Maps API �V�r�W���A���iv3.14�ȍ~�j�ŕ\�����Ă��܂��B���@�ڍׂ͂�����
�i���j�C�x���g���X�i�ŃN���[�W�����g�p������@�ŕ\�����Ă��܂�
�� �����`�����̊����Ăяo�����@
�u�i3-2�j�}�[�J�[�N���b�N�ŏ��E�B���h�E���J���v��Ɨ��������Ƃ��Ē�`���A���̏ꏊ���炱�̊����Ăяo���܂��B�܂������̃}�[�J�[����z��Œ�`���Ă��܂��B
�����̃}�[�J�[�Ə��E�B���h�E�̕\��
�� �i�Q�l�j�C�x���g���X�i�ŃN���[�W�����g�p������@ �@�`Google Developers-�C�x���g �N���[�W��
�N���[�W���Ƃ͊��I�u�W�F�N�g�̈��ŁA�������A�������A�߂�l�Ƃ��Ċ���Ԃ����A�Ƃ��Ă�A( function(){...} ) �� {...} ���̊��̎Q�Ƃ�l�Ɏ����A( function(){...} ) �ɃJ�b�R()��t���邱�Ƃł��̊������s���܂��B�܂��A���̒��ɒ�`�������������O���̊��̃��[�J���ϐ����Q�Ƃł�������������܂��B
�u�����`�����̊����Ăяo�����@�v�́u���i3-2�j�}�[�J�[�N���b�N�ŏ��E�B���h�E���J���v���폜���A�u���̌Ăяo���v�����̃R�[�h�Ɠ���ւ��܂��B
/*�i3-2�j�}�[�J�[�N���b�N�ŏ��E�B���h�E���J�� */
google.maps.event.addListener(marker, 'click', (function(marker,i) {
return function() {
var infoWindow = new google.maps.InfoWindow({ //�}�[�J�[����infoWindow���쐬
maxWidth: 250, //���E�B���h�E�̍ő啝���s�N�Z���Őݒ�
content:''+data[i].name+' '+data[i].html//���E�B���h�E���ɕ\������HTML
});
infoWindow.open(map,marker); //���E�B���h�E��\��
}
})(marker,i));
�� �T�C�h�o�[�t�� Google�}�b�v v3 �n�}
�y�[�W�g�b�v�ɕ\�������u������}�b�vv3 �v�ō쐬���� Google�}�b�v�́A�n�}�ƃT�C�h�o�[�̃��C�����̃R�[�h���o���n�}�\���������̂ł��B�摜URL�݂̂̊ȈՃA�C�R���ݒ�Ȃ̂ŁA�A�C�R���Ɖe�̈ʒu���������ɂ���Ă܂��B
�����̃J�X�^���A�C�R�����g���A
XML�t�@�C������n�}�f�[�^��ǂݍ��݁A
�T�C�h�o�[�t���̃}�b�v���쐬���Ă��܂��B
���̒n�}�� Maps API ���r�W���A���iv3.13�j�ŕ\�����Ă��܂��B���@�ڍׂ͂�����
�� �u�T�C�h�o�[�t�� Google�}�b�v v3 �n�}�v�̃\�[�X�R�[�h
���̃\�[�X�͊O���t�@�C���Ƃ��āA
���K�v�ł��B���ꂼ��������̃T�[�o�ɃA�b�v���ė��p���܂��B
";
//�}�[�J�[�N���b�N�ŏ��E�B���h�E���J��
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //���E�B���h�E�̓��e
infoWindow.open(map,marker); //���E�B���h�E��\��
map.panTo(point); //�}�[�J�[��n�}�̒��S�ʒu�Ɉړ�
});
} //end of createMarker
//�T�C�h�o�[�N���b�N�ŏ��E�B���h�E���J��(�}�[�J�[���[���N���b�N)
function myclick(num) {
google.maps.event.trigger(gmarkers[num], "click");
}
//3�{�Y�[���C���E�A�E�g
function zoomInOut(value) {
map.setZoom(map.getZoom()+value);
}
//�n�}�I�u�W�F�N�g�̍쐬
function initialize() {
var sidebarList = '';
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 8,
center: new google.maps.LatLng(35.969115,139.372559),
mapTypeId: google.maps.MapTypeId.ROADMAP, //��L3�͕K�{����
scrollwheel: false //�}�E�X�z�C�[���ł̃Y�[�����ɂ���
});
//XML�t�@�C������̃f�[�^�ǂݍ���
downloadUrl("./samplev3.xml", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var hpurl = markers[i].getAttribute("hpurl");
var imgurl = markers[i].getAttribute("imgurl");
var category = markers[i].getAttribute("category");
//�}�[�J�[�쐬
createMarker(name,point,hpurl,imgurl,category);
//�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj�
sidebarList += ''+ name +' ';
} //end of for
//�T�C�h�o�[�̕\��
document.getElementById("side_bar").innerHTML = sidebarList;
}); //end of downloadUrl
//�n�}��N���b�N�ŏ��E�B���h�E���\��
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
} //end of initialize
//�y�[�W���[�h���Ɏ��s���郁�\�b�h
google.maps.event.addDomListener(window, 'load', initialize);
�n�} �Ǎ��ݒ��E�E�E���炭���҂���������
�� �n�}�f�[�^�� XML�t�@�C�� �isamplev3.xml�j
<marker name='���O' lat='�ܓx' lng='�o�x' hpurl='HPurl' imgurl='�摜url' category='�J�e�S����' />�`���� XML�t�@�C���ł��BXML�t�@�C���� Shift-JIS �ł͂Ȃ� UTF-8 �ŕۑ����܂��B �f�[�^�͓���m�F�p�Ɂu�����N��URL�v�u�摜URL�v�ucategory�v���Ӑ}�I�Ƀu�����N�ɂ������̂�����܂��B���c��`�̗�̂悤�� category ���u�����N�ɂ���ƕW���A�C�R�����\������܂��B
�� �i���p�P�j�J�e�S�����Ƀ}�[�J�[�̕\��/��\�����ւ���
�u����n�v��u�����s�v�ȂǁA�}�[�J�[���J�e�S���������āA����̃J�e�S�������\�����������Ƃ����j�[�Y�͌��\����Ǝv���܂��B�ȉ��̓`�F�b�N�{�b�N�X�� ON/OFF ���邱�ƂŁA�J�e�S�����Ƀ}�[�J�[�̕\��/��\�����ւ�����@�ł��B
���i���J�e�S�����̃`�F�b�N�{�b�N�X�� ON/OFF �Œn�}�ɕ\������J�e�S����I�����܂��B
�A�C�R�����u�e�Ȃ����{��s���v�ɂ��A
�T�C�h�o�[ �I���}�E�X�őI�����ڂ̔w�i�F��ς���悤�ɂ��Ă��܂��B
�}�[�J�[���Ƀ}�[�J�[���A�J�e�S���[��ݒ肵�O���[�o���z��ɕۑ�
//�}�[�J�[�����O���[�o���z��ɕۑ�
marker.myname = name;
marker.mycategory = category;
gmarkers.push(marker);
�J�e�S���[�֘A�����̈ȉ��̊����AcreateMarker() �̌�ɒlj�
//�\���}�[�J�[�̃T�C�h�o�[���X�g�쐬
function makeSidebar() {
var sidebarList = '';
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
sidebarList += ''
+ gmarkers[i].myname +' ';
}
} //end of for
//�T�C�h�o�[��\��
document.getElementById("side_bar").innerHTML = sidebarList;
} //end of makeSidebar
//�\���J�e�S���̃}�[�J�[��\������
function show(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(true);}
}
document.getElementById(category+"box").checked = true;
}
//��\���J�e�S���̃}�[�J�[���\���ɂ���
function hide(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(false);}
}
document.getElementById(category+"box").checked = false;
infoWindow.close();
}
//�`�F�b�N�{�b�N�X�̃N���b�N����
function boxclick(box,category) {
if (box.checked) { show(category); } else { hide(category); }
//�\���}�[�J�[�̃T�C�h�o�[���X�g�쐬
makeSidebar();
}
downloadUrl()���́u�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj��v�u�T�C�h�o�[�̕\���v���ȉ��ɕύX
//�J�e�S�����̃}�[�J�[�\��/��\���̏����ݒ�
show("����n");
hide("�����s");
hide("�H���y");
hide("�Ԓ���");
//�\���}�[�J�[�̃T�C�h�o�[���X�g�쐬
makeSidebar();
�`�F�b�N�{�b�N�X�̃C���v�b�g�t�H�[����n�}�\���G���A�̉��ɒlj�
�� �u�i���p�P�j�J�e�S�����Ƀ}�[�J�[�̕\��/��\�����ւ���v�̃\�[�X�R�[�h
";
//�}�[�J�[�N���b�N�ŏ��E�B���h�E���J��
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //���E�B���h�E�̓��e
infoWindow.open(map,marker); //���E�B���h�E��\��
map.panTo(point); //�}�[�J�[��n�}�̒��S�ʒu�Ɉړ�
});
} //end of createMarker
//�\���}�[�J�[�̃T�C�h�o�[���X�g�쐬
function makeSidebar() {
var sidebarList = '';
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
sidebarList += ''+ gmarkers[i].myname
+' ';
}
} //end of for
//�T�C�h�o�[��\��
document.getElementById("side_bar").innerHTML = sidebarList;
} //end of makeSidebar
//�\���J�e�S���̃}�[�J�[��\������
function show(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(true);}
}
document.getElementById(category+"box").checked = true;
}
//��\���J�e�S���̃}�[�J�[���\���ɂ���
function hide(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(false);}
}
document.getElementById(category+"box").checked = false;
infoWindow.close();
}
//�`�F�b�N�{�b�N�X�̃N���b�N����
function boxclick(box,category) {
if (box.checked) { show(category); } else { hide(category); }
//�\���}�[�J�[�̃T�C�h�o�[���X�g�쐬
makeSidebar();
}
//�T�C�h�o�[�N���b�N�ŏ��E�B���h�E���J��(�}�[�J�[���[���N���b�N)
function myclick(num) {
google.maps.event.trigger(gmarkers[num], "click");
}
//3�{�Y�[���C���E�A�E�g
function zoomInOut(value) {
map.setZoom(map.getZoom()+value);
}
//�n�}�I�u�W�F�N�g�̍쐬
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 8,
center: new google.maps.LatLng(35.969115,139.372559),
mapTypeId: google.maps.MapTypeId.ROADMAP, //��L3�͕K�{����
scrollwheel: false //�}�E�X�z�C�[���ł̃Y�[�����ɂ���
});
//XML�t�@�C������̃f�[�^�ǂݍ���
downloadUrl("./samplev3.xml", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var hpurl = markers[i].getAttribute("hpurl");
var imgurl = markers[i].getAttribute("imgurl");
var category = markers[i].getAttribute("category");
//�}�[�J�[�쐬
createMarker(name,point,hpurl,imgurl,category);
} //end of for
//�J�e�S�����̃}�[�J�[�\��/��\���̏����ݒ�
show("����n");
hide("�����s");
hide("�H���y");
hide("�Ԓ���");
//�\���}�[�J�[�̃T�C�h�o�[���X�g�쐬
makeSidebar();
}); //end of downloadUrl
//�n�}��N���b�N�ŏ��E�B���h�E���\��
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
} //end of initialize
//�y�[�W���[�h���Ɏ��s���郁�\�b�h
google.maps.event.addDomListener(window, 'load', initialize);
�n�} �Ǎ��ݒ��E�E�E���炭���҂���������
�� �i���p�Q�j�}�E�X�I�[�o�[�ŏ��E�B���h�E��\�����N���b�N�Ń����N����J��
���܂ł̃T���v���́A�T�C�h�o�[���N���b�N���ď��E�B���h�E���J���A�E�B���h�E���̃����N���N���b�N���ă����N���\��������̂ł����A�T�C�h�o�[�I���}�E�X�ŏ��E�B���h�E���J���A�T�C�h�o�[�N���b�N�Ń����N���\��������@�ł��B
�A�C�R�����u�e�t���A�C�R���s���v�ɕύX
�}�b�v�^�C�v��n�`�ɂ��A�n�}�k�ځi�Y�[�����x���j�Œn�}�̎�ނ������Ő�ւ�
�n�}�̉E���ɕ\�������܂肽���݉\�ȊT�ϒn�}���J������Ԃŕ\��
�}�[�J�[�̏��E�B���h�E�\�����u���1�̂ݕ\���v����u�����\������v�ɕύX���A�n�}��N���b�N�Łu�S�Ắv�}�[�J�[�̏��E�B���h�E���\���ɂ���
�u�n�}�\�����ɏ��E�B���h�E��\������v��lj����Ă��܂��B
�}�[�J�[���Ƀ����NURL��ݒ肵�O���[�o���z��ɕۑ�
//�}�[�J�[�����O���[�o���z��ɕۑ�
marker.myhpurl = hpurl;
gmarkers.push(marker);
function myclick2(num) �� function myclick(num) �̎��ɒlj�
//�T�C�h�o�[���N���b�N���ꂽ�烊���N�y�[�W���J��
function myclick2(num) {
var w=window.open();
w.location.href = gmarkers[num].myhpurl;
}
�u�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj��v���ȉ��ɒu������
//�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj�
sidebarList += '' + name +' ';
�� �u�i���p�Q�j�}�E�X�I�[�o�[�ŏ��E�B���h�E��\�����N���b�N�Ń����N����J���v�̃\�[�X�R�[�h
";
//�}�[�J�[�N���b�N�ŏ��E�B���h�E���J��
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //���E�B���h�E�̓��e
infoWindow.open(map,marker); //���E�B���h�E��\��
map.panTo(point); //�}�[�J�[��n�}�̒��S�ʒu�Ɉړ�
});
//�n�}��N���b�N�ŏ��E�B���h�E���\��
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
} //end of createMarker
//�T�C�h�o�[�I���}�E�X�ŏ��E�B���h�E���J��(�}�[�J�[���[���N���b�N)
function myclick(num) {
google.maps.event.trigger(gmarkers[num], "click");
}
//�T�C�h�o�[�N���b�N�����N�y�[�W���J��
function myclick2(num) {
var w=window.open();
w.location.href = gmarkers[num].myhpurl;
}
//3�{�Y�[���C���E�A�E�g
function zoomInOut(value) {
map.setZoom(map.getZoom()+value);
}
//�n�}�I�u�W�F�N�g�̍쐬
function initialize() {
var sidebarList = '';
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 8,
center: new google.maps.LatLng(35.969115,139.372559),
mapTypeId: google.maps.MapTypeId.TERRAIN, //��L3�͕K�{����
overviewMapControl: true, //�n�}�̉E���ɕ\�������܂肽���݉\�ȊT�ϒn�}��\������
overviewMapControlOptions:{opened: true}, //�T�ϒn�}���J������Ԃŕ\������(�f�t�H���g�͕�)
scrollwheel: false //�}�E�X�z�C�[���ł̃Y�[�����ɂ���
});
//XML�t�@�C������̃f�[�^�ǂݍ���
downloadUrl("./samplev3.xml", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var hpurl = markers[i].getAttribute("hpurl");
var imgurl = markers[i].getAttribute("imgurl");
var category = markers[i].getAttribute("category");
//�}�[�J�[�쐬
createMarker(name,point,hpurl,imgurl,category);
//�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj�
sidebarList += ''+ name +' ';
} //end of for
//�T�C�h�o�[�̕\��
document.getElementById("side_bar").innerHTML = sidebarList;
}); //end of downloadUrl
//�n�}�\�����ɏ��E�B���h�E��\��
var infoWindow = new google.maps.InfoWindow({
position: new google.maps.LatLng(36.031332,139.026489),
content: "
"
+ "���܂ł̃T���v���́A"
+ "�T�C�h�o�[���N���b�N���ď��E�B���h�E���J���A�E�B���h�E���̃����N��"
+ "�N���b�N���ă����N���\��������̂ł����A�T�C�h�o�[�I���}�E�X��"
+ "���E�B���h�E���J���A�T�C�h�o�[�N���b�N�Ń����N���\��������@�ł��B"
+ "
"
});
infoWindow.open(map);
//�Y�[�����x���Œn�}�̎�ނ������Ő�ւ���
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom() <= 10){
map.setMapTypeId(google.maps.MapTypeId.TERRAIN); //�n�`
} else {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); //�n�}
}
});
} //end of initialize
//�y�[�W���[�h���Ɏ��s���郁�\�b�h
google.maps.event.addDomListener(window, 'load', initialize);
�n�} �Ǎ��ݒ��E�E�E���炭���҂���������
�� �m���Ă���ƕ֗��� Tips
�eTips�̃R�[�h�̑}���E�ύX�ӏ��́A�u�T�C�h�o�[�t�� Google�}�b�v v3 �n�}�v�̃\�[�X�R�[�h ���Q�Ƃ��邩�A�e�n�}�̃T�C�h�o�[�G���A���E�N���b�N���āu�\�[�X�̕\���v�����Ă��������B
�� �n�}�̃R���g���[��
�f�t�H���g�ŕ\�������}�b�v �R���g���[���́A�ȉ���4�ł��B�����Ȓn�}�ł́A�u�ړ��R���g���[���v�u�Y�[�� �R���g���[���v�u�}�b�v�^�C�v �R���g���[���v�͂��ꂼ��u��\���v�u�{�^���v�u�v���_�E���v�������I������܂��B
�ړ��R���g���[�� panControl �n�}���ړ�����{�^���B�n�}�̍���ɕ\������� �n�}�̍���(370px)�ɉ����ĕ\��/��\���������I��
�X�g���[�g�r���[ �R���g���[�� streetViewControl �l�`�̌`�������y�O�}�� �A�C�R���B�n�}�̍���ɕ\�������
�Y�[�� �R���g���[�� zoomControl �n�}�̃Y�[�� ���x���B�n�}�̍���ɕ\������� �n�}�̍���(370px)�ɉ����ăX���C�_/�{�^���������I��
�}�b�v�^�C�v �R���g���[�� mapTypeControl �}�b�v �^�C�v���ւ���B�n�}�̉E��ɕ\������� �n�}�̕�(300px)�ɉ����Đ����o�[/�v���_�E���������I��
�����̃R���g���[����v���p�e�B�̐ݒ�́A�n�}�� MapOptions �t�B�[���h�ōs���ȉ��̐ݒ肪�\�ł��B
�n�}�R���g���[���̕\��/��\��
�n�}�R���g���[���̃v���p�e�B�̕ύX
�}�E�X����̃R���g���[��
var map = new google.maps.Map(document.getElementById("map_canvas"), {
//�K�{����
zoom: 5, //�Y�[�����x���i0�`19�j
center: new google.maps.LatLng(38.651198,137.021484), //�n�}�̒��S�ʒu�i�ܓx�ƌo�x�j
mapTypeId: google.maps.MapTypeId.ROADMAP, //�}�b�v�^�C�v
//�n�}�R���g���[���̕\��/��\��
panControl: false, //�ړ��R���g���[�����\��
streetViewControl: false, //�X�g���[�g�r���[�R���g���[�����\��
zoomControl: false, //�Y�[���R���g���[�����\��
mapTypeControl: false, //�}�b�v�^�C�v�R���g���[�����\��
scaleControl: true, //�n�}�̍����ɕ\�������X�P�[���R���g���[����\������
overviewMapControl: true, //�n�}�̉E���ɕ\�������܂肽���݉\�ȊT�ϒn�}��\������
RotateControl: true, //�n�}�̍���ɕ\��������]�R���g���[����\������
disableDefaultUI: true, //�S�ẴR���g���[����������
//�n�}�R���g���[���̃v���p�e�B�̕ύX
zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
//�Y�[���R���g���[����SMALL�ɂ���
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
//�v���_�E�����j���[�^�ɂ���
overviewMapControlOptions:{opened: true}, //�R���g���[�����J������Ԃŕ\������ꍇ��true�A
//�܂肽���܂ꂽ(�ŏ������ꂽ)��Ԃŕ\������ꍇ��false���w��
//�}�E�X����̃R���g���[��
scrollwheel: false, //�}�E�X�z�C�[���ł̃Y�[�����ɂ���
disableDoubleClickZoom: true, //�_�u���N���b�N�ɂ��Y�[���ƒ����������ɂ���
draggable: false //�n�}�̃h���b�O���ɂ���
});
�� ���E�B���h�E�̍ő啝�̐ݒ�
���E�B���h�E�ɂ͕������HTML�^�O�Ȃǂ��L�q���邱�Ƃ��ł��܂����A���ɒ����������\�������ꍇ�Ȃǂ͏��E�B���h�E�̕��������I�ɍL�����ĕ\������܂��B�����Ēn�}�̉��������ς��܂ōL�����Ă��\��������Ȃ����́A�����I�ɐ܂�Ԃ����s���A����ł��I�[�o�[�t���[����ꍇ�́A�c�����X�N���[���ŕ\������܂��i��{�I�n�}�Q�Ɓj�B���E�B���h�E�̍ő啝��ݒ肷��ɂ́umaxWidth�v�v���p�e�B�Őݒ肵�܂��B
//�}�[�J�[�N���b�N�ŏ��E�B���h�E���J��
var infowindow = new google.maps.InfoWindow({
maxWidth: 250, //���E�B���h�E�̍ő啝���s�N�Z���Őݒ�
content: '���E�B���h�E���ɕ\������HTML'
});
google.maps.event.addListener(marker,'click',function(){infowindow.open(map,marker);});
�� ���E�B���h�E�����1�̂ݕ\������ V3����͕����̏��E�B���h�E��\���ł���悤�ɂȂ�܂������AV2�Ɠ����悤�ɁA�����ɂ�1�̃E�B���h�E�̂ݕ\���������ꍇ�AinfoWindow ���O���[�o���ϐ��Ƃ��ĕ����Ő錾���ď��E�B���h�E��1�����쐬���A�}�b�v �C�x���g�i�N���b�N�Ȃǁj�ɂ��ʂ̒n�_��A�}�[�J�[�ɍĊ��蓖�Ă��܂��B
//�O���[�o���ϐ��錾
var infoWindow = new google.maps.InfoWindow();
............................
//�}�[�J�[�N���b�N�ŏ��E�B���h�E���J��
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //���E�B���h�E�̓��e
infoWindow.open(map,marker); //���E�B���h�E��\��
});
�� ���E�B���h�E���\������
�u���E�B���h�E�����1�̂ݕ\������v�ł́AinfoWindow ���O���[�o���ϐ��Ƃ��Đ錾�����E�B���h�E��1�����쐬���Ă��܂����A���E�B���h�E���\���������ꍇ�́u�}�[�J�[�N���b�N�ŏ��E�B���h�E���J���v�̒��� infoWindow �����[�J���錾�� infoWindow �̍Ċ��蓖�Ă��s�킸�A�}�[�J�[���ɏ��E�B���h�E���쐬����悤�ɂ��܂��B�����ɋL�q����Ă���̂ŁA�X�̃}�[�J�[�̏��E�C���h�E���ʁX�̃C���X�^���X�ɂȂ�܂��B
//�}�[�J�[�N���b�N�ŏ��E�B���h�E���J��
var infoWindow = new google.maps.InfoWindow(); //�}�[�J�[����infoWindow���쐬
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //���E�B���h�E�̓��e
infoWindow.open(map,marker); //���E�B���h�E��\��
});
�� �n�}��N���b�N�ŏ��E�B���h�E���\���ɂ���
���E�B���h�E�����ɂ́A�E����́u����v�A�C�R�����N���b�N����K�v������܂����A�n�}���N���b�N���ď��E�B���h�E���������Ȃɂ��ƕ֗��ł��B
//�n�}��N���b�N�ŏ��E�B���h�E���\��
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
�� �n�}�\�����ɏ��E�B���h�E��\��
�n�}�\�����ɍŏ�������E�B���h�E��\������ɂ́A�ȉ��̃R�[�h���uXML�t�@�C������̃f�[�^�ǂݍ��݁v�̌�ɒlj����܂��B
//�n�}�\�����ɏ��E�B���h�E��\��
infoWindow = new google.maps.InfoWindow({
position: new google.maps.LatLng(�ܓx, �o�x), //���E�B���h�E�̒n�}��̕\���ʒu
content: '���E�B���h�E���ɕ\������HTML'
});
infoWindow.open(map);
�� ���E�B���h�E�̃v���p�e�B�̍Đݒ�
���E�B���h�E�̃v���p�e�B�̍Đݒ���s���ɂ́usetOptions�v���\�b�h���g���܂��B���̐ݒ�͏��E�B���h�E���J���O�ɍs���܂��B�ォ��usetOptions�v���\�b�h���g���ĐV�����v���p�e�B�̒l��ݒ肷��ꍇ�́A��������uclose�v���\�b�h�ŏ��E�B���h�E����usetOptions�v�Ńv���p�e�B��ݒ肵�Ă�����E�B���h�E���J���܂��B
infowindow.close();
infowindow.setOptions({
position: new google.maps.LatLng(�ܓx, �o�x), //���E�B���h�E�̒n�}��̕\���ʒu
maxWidth: 300, //���E�B���h�E�̍ő啝���s�N�Z���Őݒ�
content: '���E�B���h�E���ɕ\������HTML',
disableAutoPan: true, //�n�}�ʒu�̎����������ɂ���(�f�t�H���g��false)
zIndex: 1 //���E�B���h�E�̏d�Ȃ菇�����w��
//(�������傫�������O�ʂɕ\���A�f�t�H���g�͈ܓx���Ⴂ���̂����O�ʂɕ\��)
});
infowindow.open(map);
�� �n�}�k�ځi�Y�[�����x���j�Œn�}�̎�ނ������Ő�ւ���
����n�Ȃǂ̕\���ł́A�L��n�}�ł͎R�ԕ� or ���암�Ȃǂ����Ղ��u�n�`�}�v�A�s�X�n�}�ł̓��[�g��ߗׂ̃����h�}�[�N�Ղ��u�n�}�i���[�h�}�b�v�j�v�ŕ\�����������Ƃ�����܂��B�T���v���̓Y�[�����x�� 10 �ȉ��Œn�`�}�A11 �ȏ�Œn�}�Ɏ����Ő�ւ��ĕ\�����܂��B�uXML�t�@�C������̃f�[�^�ǂݍ��݁v�̌��Ɉȉ��̃R�[�h��lj����܂��B
//�Y�[�����x���Œn�}�̎�ނ������Ő�ւ���
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom() <= 10){
map.setMapTypeId(google.maps.MapTypeId.TERRAIN); //�n�`
} else {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); //�n�}
}
});
�� �T�C�h�o�[ �I���}�E�X�őI�����ڂ̔w�i�F��ς���
���ڑI���m�ɂ��邽�߂ɁA�T�C�h�o�[ �I���}�E�X�őI���������ڂ̔w�i�F��ς���ɂ́A�u�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj��v���ȉ��̃R�[�h�ɒu�������܂��B
//�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj�
sidebarList += ''+ name +' ';
�� �����̃J�X�^���A�C�R���Ń}�[�J�[���쐬���� �icreateMarker()�j
�u�T�C�h�o�[�t�� Google�}�b�v v3 �n�}�v�ł́Acategory �̃}�[�J�[�A�C�R���Ƃ��āA����n�͐ԃA�C�R���A�����s�͔��A�C�R���A�H���y�͗A�C�R���A�Ԓ����͉��A�C�R���̕����̃J�X�^���A�C�R�����g�p���܂��B�����̃J�X�^���A�C�R���̐ݒ�ƃ}�[�J�̍쐬���@���ȉ��Ɏ����܂��B
�J�X�^���A�C�R���̓�����@����������Q�� �B
Dynamic Icons �@�\���g���ăf�t�H���g�̃}�[�J�[���J�X�^���A�C�R���ɂ�����@����������Q�� �B
//�O���[�o���ϐ��錾
var gmarkers = [];
var map;
var infoWindow = new google.maps.InfoWindow();
//�}�[�J�[�I�u�W�F�N�g�̍쐬
function createMarker(name,point,hpurl,imgurl,category){
//�J�X�^���A�C�R���ݒ�
var customIcons = {
����n: {icon: '�ԃA�C�R����URL'}, //�J�e�S���[����n�̃A�C�R���ݒ�
�����s: {icon: '���A�C�R����URL'}, //�J�e�S���[�����s�̃A�C�R���ݒ�
�H���y: {icon: '�A�C�R����URL'}, //�J�e�S���[�H���y�̃A�C�R���ݒ�
�Ԓ���: {icon: '���A�C�R����URL'} //�J�e�S���[�Ԓ����̃A�C�R���ݒ�
};
var gicons = customIcons[category] || {}; //�w��Ȃ��̎��͕W���A�C�R�����g�p
//�}�[�J�[�ݒ�
var marker = new google.maps.Marker({
map: map, //�}�[�J�[��\������n�}��
position: point, //�}�[�J�[�̕\���ʒu
icon: gicons.icon, //�}�[�J�[�A�C�R���̐ݒ�
title: name //�I���}�E�X�ŕ\�������镶��
});
//�}�[�J�[�����O���[�o���z��ɕۑ�
gmarkers.push(marker);
var html = "���E�B���h�E�ɕ\������HTML��";
//�}�[�J�[�N���b�N�ŏ��E�B���h�E���J��
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //���E�B���h�E�̓��e
infoWindow.open(map,marker); //���E�B���h�E��\��
map.panTo(point); //�}�[�J�[��n�}�̒��S�ʒu�Ɉړ�
});
} //end of createMarker
�� Dynamic Icons �@�\���g���ăf�t�H���g�̃}�[�J�[���J�X�^���A�C�R���ɂ��� �@�`Google Developers-Dynamic Icons
�f�t�H���g�̃}�[�J�[�𗘗p���āAGoogle Chart API �� Dynamic Icons �@�\���g���ăA�C�R�����쐬������@�ł��B�摜�� Google�T�[�o�Ŏ�����������A�����ʼn摜�t�@�C�������Ȃ��Ă��ȒP�ɃJ�X�^���A�C�R��������̂ŕ֗��ł��B
�쐬��i�����N���@�̋L�q�� Google�T�[�o�[����摜��ǂݍ��ݕ\�����Ă��܂��j
�����s���F
�A�C�R���s���F
(�z�[��)
(���ԏ�)
(GS)
(�H��)
(��`)
(�w)
(�V���n)
�� �����s��
//���{��s���̍쐬�i��encodeURI()���g���j
var customIcons = {
����n: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("��") +'|FF0000|000000'},
�����s: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("��") +'|0000FF|FFFFFF'},
�H���y: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("�H") +'|00FF00|000000'},
�Ԓ���: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("��") +'|FFFF00|000000'}
};
//���{��s���̍쐬�iUTF-8��URL�G���R�[�h������������g���j
var customIcons = {
����n: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e6%b8%a9|FF0000|000000'},
�����s: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e6%97%85|0000FF|FFFFFF'},
�H���y: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e9%a3%9f|00FF00|000000'},
�Ԓ���: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e8%bb%8a|FFFF00|000000'}
};
//�p��s���̍쐬
var customIcons = {
����n: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=A|FF0000|000000'},
�����s: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=B|0000FF|FFFFFF'},
�H���y: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=C|00FF00|000000'},
�Ԓ���: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=D|FFFF00|000000'}
};
�� �A�C�R���s��
//�A�C�R���s���̍쐬
var customIcons = {
����n: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=parking|FF0000'},
�����s: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=train|FFFFFF'},
�H���y: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=petrol|00FF00'},
�Ԓ���: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=home|FFFF00'}
};
�� �ݒu�@
�u�T�C�h�o�[�t�� Google�}�b�v v3 �n�}�v�̃\�[�X�R�[�h �́u�J�X�^���A�C�R���ݒ�v���u���{��s���̍쐬�vor�u�p��s���̍쐬�vor�u�A�C�R���s���̍쐬�v�ɓ���ւ��܂��B
URL�G���R�[�h
���{�ꕶ���Ȃǂ̔�A�X�L�[�����́A���̂܂܂ł�URL�Ƃ��Ďg���܂���BURL�ɓ��{����g�����߂ɂ́A
encodeURI() �Ƃ���JavaScript�����g���ċL�q����@or
UrlEncode.net �œ��{�ꕶ���������R�[�h UTF-8 ��URL�G���R�[�h ���AURL�Ŏg���镶����ɕϊ����ċL�q���܂��B�i���� %e6%b8%a9�A���� %e6%97%85�A�H�� %e9%a3%9f�A�Ԃ� %e8%bb%8a �Ȃǁj
�����N���@�ƃp�����[�^�̐����i�F�t���̉ӏ��������̗p�r�ɍ��킹�ĕύX�j
�����s���F
�������N���@��
http://chart.apis.google.com/chart?chst=d_map_pin_letter &chld=%e6%b8%a9 |FF0000 |000000
���p�����[�^�̐�����
?chst=d_map_pin_letter �@�@�@�@�@�@�@�@ �F�A�C�R���̌`��(letter �������s��)���w��
�i?chst=d_map_pin_letter_withshadow �@�F�e�t���A�C�R���ɂ���ꍇ�j
&chld=%e6%b8%a9 |FF0000 |000000 �@�@ �F���� (%e6%b8%a9����)�A�w�i�F (RGB)�A�����F (RGB) ���w��
���� ���w�肵�Ȃ��iencodeURI("") or &chld=|FF0000|�ɂ���j�ƕ����Ȃ��̃A�C�R���i�w�i�FFF0000���ԁj�ɂȂ�܂��B
�A�C�R���s���F
�������N���@��
http://chart.apis.google.com/chart?chst=d_map_pin_icon &chld=home |FFFF00
���p�����[�^�̐�����
?chst=d_map_pin_icon �@�@�@�@�@�@�@�@�@�F�A�C�R���̌`��(icon ���A�C�R���s��)���w��
�i?chst=d_map_pin_icon_withshadow �@ �F�e�t���A�C�R���ɂ���ꍇ�j
&chld=home |FF0000 �@�@�@�@�@�@�@�@�@�@�F�A�C�R���� �A�w�i�F (RGB) ���w��
�g�p�ł����A�C�R���ƃA�C�R�����͂�������Q��
�� XML�t�@�C���̓ǂݍ��݃��C�u�����[
V3 ��Google Maps API �� XML�t�@�C����ǂݍ��ޕ��@�́A��ʓI�ɂ� JavaScript �̃��C�u�����[ jQuery ���g���܂����A�{�v���O�����ł� downloadxml.js �Ƃ������C�u�����[���g����XML�t�@�C���̓ǂݍ��݂��s���܂��B
�� downloadxml.js�̃_�E�����[�h �i2014.1.23���݂̍ŐV�ł� r44�j
Google Project Hosting �y�[�W �E���́uFile info�v���uView raw file�v���N���b�N���ă\�[�X�y�[�W���J���A�R�s�[���\��t���� downloadxml.js�t�@�C�����쐬���܂��B�쐬���� downloadxml.js �������̃T�[�o�ɃA�b�v���ė��p���܂��B
�� downloadxml.js�̑g�ݍ���
HTML�̃w�b�_�[���Ɉȉ��̍s��lj����Adownloadxml.js��g�ݍ��݂܂�
�� XML�t�@�C���̓ǂݍ��� �idownloadUrl()�j
<marker name='���O' lat='�ܓx' lng='�o�x' hpurl='HPurl' imgurl='�摜url' category='�J�e�S����' />
�`���́A�v�f�imarker�^�O�j�ɑ����ƒl�iname='�����X�J�C�c���['�Alat='35.71008' �E�E�E category='�����s'�j���L�q����XML�t�@�C�����������܂��B
�i�d�v�jXML�t�@�C���� Shift-JIS �ł͂Ȃ� UTF-8 �ŕۑ����Ȃ��Ɠǂݍ��߂Ȃ��̂Œ��ӂ��܂��B
//XML�t�@�C������̃f�[�^�ǂݍ���
downloadUrl("XML�t�@�C����URL", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name"); //name�����̒l(���O)��ϐ�name�Ɋi�[
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng")); //�}�[�J�[�̍��W�l(�ܓx,�o�x)��ϐ�point�Ɋi�[
var hpurl = markers[i].getAttribute("hpurl"); //hpurl�����̒l(HPurl)��ϐ�hpurl�Ɋi�[
var imgurl = markers[i].getAttribute("imgurl");
//imgurl�����̒l(�摜url)��ϐ�imgurl�Ɋi�[
var category = markers[i].getAttribute("category");
//category�����̒l(�J�e�S����)��ϐ�category�Ɋi�[
//�}�[�J�[�쐬
createMarker(name,point,hpurl,imgurl,category);
//�T�C�h�o�[���X�g�ɃT�C�h�o�[��lj�
sidebarList += ''+ name +' ';
} //end of for
//�T�C�h�o�[�̕\��
document.getElementById("side_bar").innerHTML = sidebarList;
}); //end of downloadUrl
�� Google Maps visual refresh�i�V�r�W���A���j �@�`Google Maps JS API v3 Notify(�p��)
�i2014.2.18�NjL�j2014.2.18�� v3.15 �����������[�X����A���r�W���A���iv3.13�j�͎g���Ȃ��Ȃ�܂����B
2013.11.15�ɁA�n�}�̊O�ς���V�����i�r�W���A�� ���t���b�V�� �jv3.14�����������[�X����A���r�W���A���iv3.13�j�ŕ\������Ă����}�[�J�[����E�B���h�E�̉e�摜�́A�ݒ肵�Ă��S�Ė��������悤�ɂȂ�܂����B
���������[�X�ȍ~�́A�V�r�W���A���iv3.14�j�Ɋ��S�ɐ�ւ�������߁A���r�W���A���iv3.13�j�̒n�}�͕\���ł��Ȃ��Ȃ�A���r�W���A���Œn�}�\���������ꍇ�́AHTML�w�b�_�[���́uV3�̑g�ݍ��݃p�����[�^�v�ɁA�g���ރ��C�u�������o�[�W�����w��i&v=3.13�j ��lj����܂��i������v3.15�����������[�X������v3.13�͎g���Ȃ��Ȃ�̂ŁA�e���ǂ����Ă��K�v�Ȓn�}�͂���܂ł�Dynamic Icons�̉e�t���A�C�R�� �ɐ؊�����Ȃǂ̑Ώ����K�v�ł��j�B
Google Maps visual refresh�i�V�r�W���A���j�iv3.14�j�ł́A���̂S�̑傫�ȕύX���s���Ă��܂��B
�V�����x�[�X�}�b�v�i�������H������I�����W�A�������I�����W���物�F�A���������F�����ʓ��Ɠ����F�Ȃ��Ɂj
�V�f�t�H���g�}�[�J�[�i�T�C�Y�������傫���Ȃ�F���N�₩�ɁB�e�Ȃ��j
���E�B���h�E�̃X�^�C���i�����o�����̕ύX�Ɖe�Ȃ��B�����T�C�Y�̏k���j
�R���g���[���̃X�^�C���i�{�^�����̃p�[�c���e�Ȃ��ƂȂ�S�ʂɂ������肵�����̂Ɂj
�y�V�r�W���A���iv3.14�j�̒n�}�z �� �y���r�W���A���iv3.13�j�̒n�}�z