|
|
01/17(Fri) 21:01
�� Google�}�b�v�����p���悤 �| Google Maps v2��ݒ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�NjL�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/22���� V2 �\�[�X�� V3 �ŕ\�������悤�ɂȂ�܂����B�}�[�J�[����E�B���h�E�̉e�摜���\������Ȃ��iV3 �ł͉e�摜�͑S�Ė��������j�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
���̃y�[�W�̃}�b�v�́AGoogle�}�b�vV2�ō쐬�������̂�V3�Ƀ��b�s���O���ĕ\�����Ă��邽�߁A���E�B���h�E�̔z�u���n�}����͂���邱�Ƃ�����܂��B
- Google Maps�ݒu�菇
- �Œ���K�v�ȃJ�X�^�}�C�Y�Ɠ���m�F
- ���p�I�Ȓn�}�ɂ��邽�߂̃J�X�^�}�C�Y
- �n�}��}�[�J�[�̈ܓx�E�o�x�̎擾
- �~�j�A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O����
- �����A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O����
- Google�}�b�v �T�C�h�o�[�t�n�}�쐬�v���O����
�� �͂��߂�
Google�}�b�v�Ƃ́A�č�Google�Ђ����閳���n�}�T�[�r�X�̂��ƂŁAAjax�Ă��Z�p�𗘗p���āA�u���E�U��ŃI�����C���n�}�������ł���T�[�r�X�ł��B�I�����C���o�^���s���A�����Ŏg�����Ƃ��ł��A�E�F�u�T�C�g���u���O��ɊȒP�ɐ��E�n�}��\�����邱�Ƃ��ł��܂��B
���s�L�̖K��n�Љ��[�����X�����������X���e�̋L�^�A�O���u���̗��j���ꍇ��n�̋L�^�ȂǁA�n�}����ʐ^�E������t���ŏЉ�������Ղ��Ȃ�̂ł͂Ǝv���܂��B�e�r����̍H�쎺�ɐݒu���Ă��n�}�͂������B
�� Google Maps�ݒu�菇
- Google�A�J�E���g�̎擾�i�����Ă���͎��ցj
- Google�A�J�E���g�������Ă��Ȃ���AGoogle�A�J�E���g�y�[�W����A�J�E���g���擾����BGoogle�A�J�E���g���J�݂���Ɗm�F�̃��[���������Ă���̂Ŋm�F�����N���N���b�N���ēo�^�����B
- Google Maps API�L�[���擾����
- Google Maps API�ɓo�^���� �ɃA�N�Z�X
- �u���p�K���ǂ�ł���ɓ��ӂ��܂��v���`�F�b�N���A�g�p����E�F�u�T�C�g�� URL����͌�A�uAPI�L�[������v�{�^���������B
�i���j�g�p����E�F�u�T�C�g�ɂ́u���C���h���C���v��\������Ƃ悢�B���C���h���C���Ő\������Γ���API�L�[�Łu�T�u�h���C���v��u�T�u�t�H���_�v�ɂ��n�}��\���ł���B
- API�L�[�E�ݒu�ł���URL�E�T���v��HTML���\�������B
- �T���v��HTML���J�X�^�}�C�Y���A�����̃T�C�g�ɐݒu����B
�� �Œ���K�v�ȃJ�X�^�}�C�Y�Ɠ���m�F
�� �T���v��HTML�R�[�h�̊�{�\��
API�L�[���擾����ƁA�ȉ��̃T���v��HTML���\������܂��B���̃T���v��HTML�̓��e��Google Maps API�y�[�W����Google�A�J�E���g�Ń��O�C�������API�L�[�ƂƂ��ɂ��ł��m�F�ł��܂��B
-------------(1)
Google Maps JavaScript API Example
-----------------------------------------------(2)
------------------------------------------------------------------------(4)
----------------------------------------(5)
-------------------------(6)
|
- (1)�F�y�[�W�̕����R�[�h�̎w��
- (2)�FAPI�̓ǂݍ���
- (3)�`(4)�FGoogle Maps�p�v���O�����B�����ɃJ�X�^�}�C�Y�v���O������lj�����
- (5)�F�y�[�W�ǂݍ��݂������������load()�����s�A�y�[�W��������Ƃ���GUnload()�����s����R�}���h
- (6)�F�n�}�̕\���ʒu�ƕ\���T�C�Y�̎w��B�����ɒn�}���\�������
�X�|���T�[�����N
�� �Œ���K�v�ȃJ�X�^�}�C�Y
�T���v��HTML��\��t���������̏�Ԃł́AWindows�ł͒n�}���\������܂���B���R�́A�E�F�u�y�[�W�̕����R�[�h��Google Maps�ƈقȂ��Ă��邩��ł��BGoogle Maps�֑��荞�܂�镶���R�[�h��utf-8�Ȃ̂ɑ��āA�z�[���y�[�W��u���O�̕����R�[�h�́AShift_JIS��EUC-JP�ŏ�����Ă���ꍇ�������̂ŕ\������Ȃ��Ƃ������Ƃł��B�������������ɂ́A�ȉ��̕ύX���s���܂��B
- �T���v��HTML�R�[�h(1)�́A�y�[�W�̕����R�[�h�̕ύX�iutf-8��Shift_JIS or EUC-JP�j
- <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
- �T���v��HTML�R�[�h(2)�́AAPI�̕����R�[�h�̖����iscript�^�O��charset������utf-8�Ɩ�������j
- <script src="http://maps.google.com/maps?file=api&v=2&key=[������API�L�[]" charset="utf-8" type="text/javascript"></script>
�� �n�}�̑g����
�ύX������������A�T���v��HTML�R�[�h(2)�́A[������API�L�[]�����Ȃ���API�L�[�ɂȂ��Ă邩�m�F���āA����m�F�̂��߈ȉ��̂ǂ��炩�̕��@�ŁA�E�F�u�y�[�W��u���O�֒n�}��g���݂܂��B
- iframe�𗘗p���Đݒu����
���̕��@�̃����b�g�́A�y�[�W���̃C�����C���փt���[���֕ʂ̕�����ǂݍ��ނ̂ŁA�قȂ�h�L�������g�^�C�v�╶���R�[�h�ł����Ȃ��Ƃ������Ƃł��B���Ƀu���O�ł̓h�L�������g�^�C�v��̕����R�[�h�͎����o�͂ɂȂ��Ă���A���[�U�[���ȒP�ɕύX�ł��Ȃ��P�[�X�����X����̂ł��̕��@�������߂��܂��B
- �n�}��\���������ꏊ�Ɉȉ����L�q���܂��B�i�J�X�^�}�C�Y��̒n�}��HTML�t�@�C�����Fsample.html�j
- <iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="./sample.html"></iframe>
- �E�F�u�y�[�W�Ƀ\�[�X�R�[�h��lj�����
�E�F�u�y�[�W�ɒ���HTML�R�[�h��g���ޕ��@�ł��B��L�T���v��HTML�����ɑg���ރ\�[�X�Ɖӏ���������܂��B
- head���F�J�X�^�}�C�X���ꂽ�\�[�XNo(1),(2),(3)�`(4)��head���ɒlj����܂�
- body�^�O�Fbody�^�O����onload="load()" onunload="GUnload()"��lj����܂��i�\�[�XNo(5)�j
- body���F�n�}��\���������ꏊ��
<div id="map" style="width: 500px; height: 300px"></div>���L�q���܂��i�\�[�XNo(6)�j
�� ����m�F
�ύX��̃T���v��HTML�ł́AGoogle�Д��˂̒n�A�J���t�H���j�A�B�E�p���A���g�̒n�}�i�E�}�j���\������܂��B���̒n�}���\�������A�E�F�u�y�[�W��u���O�ւ̑g���݂͐���Ɋ����ł��B
�� ���p�I�Ȓn�}�ɂ��邽�߂̃J�X�^�}�C�Y
�� Google Maps API�iApplication Program Interface�j�Ƃ́H
�����̖ړI�ɍ������n�}�ɂ��邽�߂ɂ́A�T���v��HTML�����ɃJ�X�^�}�C�Y���K�v�ł��BGoogle Maps API�ł́AJavaScript���g����Google�}�b�v���E�F�u�y�[�W�ɖ��ߍ��ނ��Ƃ��ł��܂��B�n�}�̕\���iGMap2�j���n�߁A�}�b�v�^�C�v�iGMapType�j�A�n�}�̏k�ځiGScaleControl�j�A�R���g���[���iGMapControl�j�A�}�[�J�[�iGMarker�j�A���E�B���h�E�iGInfoWindow�j�ȂǁA�n�}�𑀍삵����R���e���c��n�}�ɒlj����邽�߂̑����̃��[�e�B���e�B��API�Ƃ����܂��B�J�X�^�}�C�Y�͂���API�����p���čs���܂��B���@�́A�T���v��HTML��Google Maps�p�v���O�������ɁA�Y������API��lj����Ă������Ƃōs���܂��B
�i�Q�lURL�j
Google Maps API�n�}�̊�{�AGoogle Maps API���t�@�����X�AGoogle Maps API V2 Class Reference (�Ӗ�ƃT���v��)
�� ���p�I�Ȓn�}�ɂ��邽�߂̃J�X�^�}�C�Y
���p�I�Ȓn�}�ɂ��邽�߂ɍl������J�X�^�}�C�Y���ڂɂ͈ȉ��̂��̂�����܂��B�܂��A�}�[�J�[�lj����ȕւɂ��邽�߂ɁuGoogle�}�b�v�}�[�J�[�쐬�v���O���� addMarker�v���쐬���܂����̂ł����p���������B
- �R���g���[���̐ݒu�F
- �}�b�v�R���g���[���i�g��k���X���C�h�o�[�ƈʒu�ړ��̏\���{�^���j�iGMapControl�j
- �}�b�v�^�C�v�R���g���[���i�n�}�A�q��ʐ^�A�n�}+�ʐ^�j�iGMapType�j
- �X�P�[���R���g���[��(�����ڐ�)�iGScaleControl�j
- �}�[�J�[�̒lj��Ə��E�B���h�E�̕\���F�iGMarker�AGInfoWindow�j
- �}�[�J�[��lj����A���ꂼ��̃}�[�J�[�Ƀ}�E�X��������Ə��E�B���h�E��\������
- ���̏��E�B���h�E���Ƀ}�[�J�[���ƃ}�[�J�[�̎ʐ^��\�����A������N���b�N����Ǝw�肵��URL�փW�����v����
- �}�E�X�z�C�[���ɂ��Y�[�������iGScrollWheelZoom�j
- �R���g���[���̋@�\�ύX�F
- �����Ȓn�}�T�C�Y�ł́A�}�b�v�R���g���[���́u�X���C�h�o�[�v���͂����iGSmallMapControl�j
- �ړI�ɂ���ẮA�}�b�v�^�C�v�R���g���[���́u�n�}+�ʐ^�v���u�n�`�v�ɕύX����iaddMapType�AremoveMapType�j
- �f�t�H���g�n�}�̕ύX�F
- �j�[�Y�ɍ��킹�āA�f�t�H���g�n�}���u�n�}�v����u�n�`�v��u�q��ʐ^�v���ɕύX����isetMapType�j
- �T�C�h�o�[�t�n�}�F
- �n�}�̉��ɃT�C�h�o�[���쐬���A���ڂ��N���b�N���ꂽ����E�B���h�E��\������
�� �J�X�^�}�C�Y��̒n�}��HTML�\�[�X
�i���j���̃\�[�Y���R�s�[���\��t������ꍇ�́A�u�}�[�J�[�lj��v�ɂ��� addMarker���ɉ��s�������Ă܂��̂ʼn��s���폜����1�s�̕��ɂȂ�悤�ɕύX���Ă��������B���s������ƃG���[�ɂȂ�܂��B
Google Maps JavaScript API Example
|
�� �@�\�̍폜�E�ύX���@
�@�\�̍폜��ύX�͂���ɊY������s���폜 or �ύX���܂��B�Ⴆ�A
- �f�t�H���g�̒n�}���u�n�}�v�̂܂܂ɂ������ꍇ�́A�Y������s��map.setMapType�s���폜����B
- �X�P�[���R���g���[�����s�v�̏ꍇ�́A�Y������s��map.addControl(new GScaleControl());���폜����B
- �X���C�h�o�[�t���̃}�b�v�R���g���[���ɂ������ꍇ�́Amap.addControl(new GSmallMapControl());��map.addControl(new GLargeMapControl());�ƁhSmall�h���hLarge�h�ɕύX����B
- �}�E�X�I�[�o�[�ł͂Ȃ��ă}�E�X�N���b�N�ŏ��E�B���h�E��\���������ꍇ�́AGEvent.addListener�̃p�����[�^�@�hmouseover�h���hclick�h�ɕύX����B
- ���E�B���h�E�ɕ��������\���������ꍇ�́A�p�����[�^html�̓��e����<img src=�E�E>�̕������폜����B
- �}�[�J�[��ݒ肵�Ȃ��ꍇ�́A�u//�}�[�J�[�lj��v���O�����v�s����u//�i�ȍ~�A�K�v�Ȃ����}�[�J�[��lj�����j�v�s�܂ł��폜����B
- �}�[�J�[�̂ݕ\���i���E�B���h�E��\���j�̏ꍇ�́A�}�[�J�[�lj��v���O��������GEvent.addListener�s���폜���A�}�[�J�[�lj��L�q����addMarker(35.658545,139.745683,"");�ƃp�����[�^html�������ɂ���B
�Ȃǂł��B
�� �}�[�J�[�lj��v���O����addMarker�̎g�p���@
- �p�����[�^lat,lng�Ƀ}�[�J�[�̈ܓx�E�o�x�Ahtml�ɏ��E�B���h�E���ɕ\��������e��HTML���ŋL�q����B
- html����[�����N��URL]�A[�摜URL]�́A�}�[�J�[�̎��ۂ̃����N�Ɖ摜��URL�ɕύX����B
- �}�[�J�[�������ɂȂ�ƁAHTML�\�[�X�������ƂȂ胁���e�i���X����ςɂȂ�̂ŁAJavaScript�����iGoogle Maps�p�v���O�����j��js�t�@�C���Ƃ��ĊO���t�@�C��������Ƃ������肵�܂��B���@�͂������B
�� �n�}��}�[�J�[�̈ܓx�E�o�x�̎擾
Google Maps�ł͒n�}��}�[�J�[��\������ꏊ���w�肷��ۂɁu�ܓx�E�o�x�v��p���܂��B�ܓx�E�o�x�̎擾�ɂ͂��������@������܂����A(1)�̕��@���A�Z���▼�O�Ȃǂ̃L�[���[�h����͂��邱�ƂŁA���̏ꏊ�̒n�}�ƈܓx�E�o�x��\�����Ă����̂ŊȒP�ŕ֗��Ǝv���܂��B(1)�Ńq�b�g���Ȃ��ꍇ��(2)�̕��@�Ŏ擾���܂��B
- Geocoding�𗘗p����
- Geocoding�ɃA�N�Z�X���܂��B�W�I�R�[�f�B���O�Ƃ́A�Z���≮���A�r�����A�n���A�w���A�X�֔ԍ��A�d�b�ԍ��ȂLjʒu��A�z�����郏�[�h����A�ܓx�E�o�x�̈ʒu�����Z�o����Z�p�ł��B
- �g�b�v�y�[�W�ɂ��錟���{�b�N�X�ɁA�n�}��\���������ꏊ�̃L�[���[�h����͂��܂��B
- �L�[���[�h�Ƀq�b�g�����ꏊ���\�������̂ŁA���̏ꏊ�̈ܓx�E�o�x���擾���܂��B�Ⴆ�A�����^���[�̈ܓx�E�o�x�͉�ʁi�N���b�N�Ŋg��摜�j����i35.658545,139.745683�j�ƂȂ�܂��B
- Google�}�b�v���g���Ď擾����
- Goole�}�b�v�ňܓx�E�o�x���擾�������n�}��\�����܂��B�ʒu�̐��x���グ�邽�߉�ʂ�����Ɋg�債�܂��B
- ���ׂ����ꏊ�ʼnE�N���b�N���u������n�}�̒��S�v��I���A���̏ꏊ���n�}�̒����ɗ���悤�Ɉړ����܂��B
- �n�}�̉E��ɂ���u�����N�v���N���b�N���A�u���̃����N�����[���ɓ\��t���Ēn�}�����L�ł��܂��v�̉��ɕ\������Ă���URL���R�s�[���܂��B
- �擾����URL�́ull=�v�̌�ɋL�q����Ă���l���ܓx�ƌo�x�ɂȂ�܂��B
- ���L��(2)�̕��@�Ŏ擾���������^���[��URL�ł��B
http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=%E6%9D%B1%E4%BA%AC%E3
%82%BF%E3%83%AF%E3%83%BC&sll=36.5626,136.362305&sspn=35.655214,51.152344
&ie=UTF8&ll=35.65856,139.745423&spn=0.002114,0.003122&z=18&iwloc=A
�@�@�@���ull=�v�̌�ɋL�q����Ă���l�A(35.65856,139.745423)�����߂�ܓx�E�o�x�ɂȂ�܂��B
�� Google Maps API Tips
�}�[�J�[�ɂ̓f�t�H���g�A�C�R���̑���ɃJ�X�^���A�C�R�����`�ł��܂��B1�̃A�C�R���́A�A�C�R���{�̂̉摜�Ɖe�̉摜���琬��A�A�C�R���̃T�C�YGSize�ƈʒuGPoint���`����K�v������܂��B�e�t���̃J�X�^���A�C�R�������삷��͕̂��ʂ̐l�ɂ͓���̂ŁAGoogle�Ђ̊J���Ҍ����h�L�������g�uGoogle Maps API�n�}�̊�{�v�ŏЉ��Ă���A�f�t�H���g�A�C�R��G_DEFAULT_ICON �^�C�v���g�p�����A�C�R����AGoogle Ride Finder�̃~�j�}�[�J�[���g�p���ă}�[�J�[�쐬�v���O�������쐬���܂��B
�� ���p�\�ȃA�C�R���̃T�C�Y�ƐF
�ȉ��̃}�[�J�[�lj��v���O�����ɂ́A�J�X�^���A�C�R�����K�v�ł��B�A�C�R�����E�N���b�N���u���O��t���ĉ摜��ۑ��v�� sample.html �Ɠ����t�H���_�ɂ��̂܂܂̖��O�ŕۑ����܂��B
�A�C�R�� | �� | �� | �� | �� | �� | �� | ���� | �� | �� | �D | �� | �e |
�J���[�� | red | blue | green | yellow | purple | pink | ltblue | orange | white | gray | black | shadow |
���[�W(�h�b�g�t) | | | | | | | | | �| | �| | �| | |
���[�W(�h�b�g��) | | | | | | | | | �| | �| | �| |
�v�b�V���s�� | | | | | | | | �| | �| | �| | �| | |
�~�j | | | | | | �| | �| | | | | | |
- ���[�W�A�C�R��
- �h�b�g�t�Fhttp://maps.google.co.jp/mapfiles/ms/icons/red-dot.png
- �h�b�g���Fhttp://maps.google.co.jp/mapfiles/ms/icons/red.png
- �e�Fhttp://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png
- �v�b�V���s���A�C�R��
- �{�́Fhttp://maps.google.co.jp/mapfiles/ms/icons/red-pushpin.png
- �e�Fhttp://maps.google.co.jp/mapfiles/ms/icons/pushpin_shadow.png
- �~�j�A�C�R��
- �{�́Fhttp://labs.google.com/ridefinder/images/mm_20_red.png
- �e�Fhttp://labs.google.com/ridefinder/images/mm_20_shadow.png
�� �~�j�A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O����
Google Ride Finder�̃~�j�}�[�J�[1���g�p���ăJ�X�^���A�C�R�����쐬�����}�[�J�[�lj��v���O�����ł��B
- �J�X�^�}�C�Y���HTML�\�[�X�́u//�}�[�J�[�lj��v���O�����v����u//�}�[�J�[�lj��v�s�܂ł����ւ��܂��B
- �A�C�R���̐F��ύX���������́Amm_20_red.png �� "red" �� "blue"�A"green"�����p�������J���[���ɕύX���܂��B
- �f�t�H���g�n�}���u�n�}�v�ɁA�X�P�[���R���g���[�����폜�A�}�E�X�I�[�o�[���}�E�X�N���b�N�ɕύX���Ă��܂��B
//�~�j�A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O����
var miniIcon = new GIcon(); //�~�j�A�C�R���̍쐬
miniIcon.image = "./mm_20_red.png"; //�A�C�R���摜��URL
miniIcon.shadow = "./mm_20_shadow.png"; //�e�摜��URL
miniIcon.iconSize = new GSize(12, 20); //�A�C�R���摜�̃T�C�Y
miniIcon.shadowSize = new GSize(22, 20); //�e�摜�̃T�C�Y
miniIcon.iconAnchor = new GPoint(6, 20);
//�e�摜�̈ʒu�B�A�C�R���摜�̍��������̑��Έʒu�Ŏ���
miniIcon.infoWindowAnchor = new GPoint(5, 1);
//���E�B���h�E�̈ʒu�B�A�C�R���摜���������̑��Έʒu
//�}�[�J�[�lj��v���O����
function addMarker(lat,lng,html) {
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
GEvent.addListener(marker,"click",function(){marker.openInfoWindowHtml(html);});
map.addOverlay(marker);
}
//�}�[�J�[�lj�
|
�� �����A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O����
1�̒n�}�̒��Ń}�[�J�[�̃T�C�Y��F��ς��ĕ\���������ꍇ�Ɏg���܂��B�A�C�R���̎�ށE�T�C�Y�E�F���w�肷��p�����[�^ icon �� addMarker �ɒlj�����Ă��܂��B
//�~�j�A�C�R���p�x�[�X�A�C�R���̍쐬
var baseIcon = new GIcon();
baseIcon.shadow = "./mm_20_shadow.png"; //�e�摜��URL
baseIcon.iconSize = new GSize(12, 20); //�A�C�R���摜�̃T�C�Y
baseIcon.shadowSize = new GSize(22, 20); //�e�摜�̃T�C�Y
baseIcon.iconAnchor = new GPoint(6, 20);
//�e�摜�̈ʒu�B�A�C�R���摜�̍��������̑��Έʒu�Ŏ���
baseIcon.infoWindowAnchor = new GPoint(5, 1);
//���E�B���h�E�̈ʒu�B�A�C�R���摜���������̑��Έʒu
//�����A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O����
function addMarker(lat,lng,html,icon) {
if(icon == ""){
//�f�t�H���g�A�C�R���i�h�b�g�t�ԁj
var marker = new GMarker(new GLatLng(lat,lng));
} else if(icon == "blueWD" || icon == "greenWD" ||
icon == "yellowWD" ||icon == "purpleWD" || icon == "orangeWD" ||
icon == "pinkWD" ||icon == "ltblueWD" || icon == "redND" ||
icon == "blueND" ||icon == "greenND" || icon == "yellowND" ||
icon == "purpleND" ||icon == "orangeND" || icon == "pinkND"){
//���[�W�A�C�R���i�h�b�g�t:��,��,��,��,��,��,����,���h�b�g��:��,��,��,��,��,��,���j
icon = icon.replace("WD","-dot"); //�A�C�R���t�@�C��������
icon = icon.replace("ND","");
var largeIcon = new GIcon(G_DEFAULT_ICON); //���[�W�A�C�R���쐬
largeIcon.image = "./"+icon+".png"; //�A�C�R���摜��URL
largeIcon.iconSize = new GSize(32, 32); //�A�C�R���摜�̃T�C�Y
var marker = new GMarker(new GLatLng(lat,lng),{icon:largeIcon});
} else if(icon == "red" || icon == "blue" || icon == "green" ||
icon == "yellow" || icon == "purple" || icon == "orange" ||
icon == "white" || icon == "gray" || icon == "black"){
//�~�j�A�C�R����,��,��,��,��,��,��,�D,��
var miniIcon = new GIcon(baseIcon); //�~�j�A�C�R���쐬
miniIcon.image = "./mm_20_"+icon+".png"; //�A�C�R���摜��URL
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
} else {alert("�A�C�R�� "+icon+" �̎w��~�X�ł�");}
//�}�[�J�[�Ƀ}�E�X��������Ə��E�B���h�E��\������
GEvent.addListener(marker,"mouseover",
function(){marker.openInfoWindowHtml(html);});
map.addOverlay(marker); //�}�[�J�[��n�}�ɃI�[�o���C�\��
}
|
addMarker�̃p�����[�^ icon �ɂ́A"red"�A"blue"�A"green"���̃J���[�������ɉ��L�̂悤�Ɏw�肵�܂��B
- �f�t�H���g�A�C�R���i�h�b�g�t�ԁj�F""�i�j
- ���[�W�A�C�R���i�h�b�g�t�j�F�J���[��+WD�i��A"blueWD"�A"greenWD"�A"yellowWD"�E�E�E�j
- ���[�W�A�C�R���i�h�b�g���j�F�J���[��+ND�i��A"redND"�A"blueND"�A"greenND"�A"yellowND"�E�E�E�j
- �~�j�A�C�R���F�J���[���i��A"red"�A"blue"�A"green"�A"yellow"�E�E�E�j
�i���j���̃\�[�Y���R�s�[���\��t������ꍇ�́AaddMarker ���ɉ��s�������Ă܂��̂ʼn��s���폜����1�s�̕��ɂȂ�悤�ɕύX���Ă��������B���s������ƃG���[�ɂȂ�܂��B
//�}�[�J�[�lj�
addMarker(35.658545,139.745683,'�����^���[','');
addMarker(35.455557,139.674572,'���l�x�C�u���b�W','yellowWD');
addMarker(35.362859,138.730883,'�x�m�R','greenND');
addMarker(35.773552,140.388244,'���c��`','blueND');
addMarker(36.373055,140.449523,'���˘�y��','white');
addMarker(35.61703,139.188953,'���͌� ���͌́A���͐�𑊖̓_���ɂ����
�����~�߂č��ꂽ�l���ł���B �l���Ɂ����Ɩ��������ŏ��̗�B','purple');
//�i�ȍ~�A�K�v�Ȃ����}�[�J�[��lj�����j
|
�� Google�}�b�v �T�C�h�o�[�t�n�}�쐬�v���O����
�u�����A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O�����v�ɃT�C�h�o�[��lj��������̂ł��B�}�[�J�[ or �T�C�h�o�[���N���b�N����Ə��E�B���h�E���\������܂��BaddMarker�Ƀp�����[�^markerName���lj�����Ă��܂��B
- ���̃\�[�Y���R�s�[���\��t������ꍇ�́AaddMarker ���ɉ��s�������Ă܂��̂ʼn��s���폜����1�s�̕��ɂȂ�悤�ɕύX���Ă��������B���s������ƃG���[�ɂȂ�܂��B
- �T�C�h�o�[�̏c���͒n�}�̏c���Ɠ����ɂ��܂��Boverflow:auto;�w��ŁA�T�C�h�o�[���n�}�c������Ǝ����I�ɃX�N���[���\���ɂȂ�܂��B
- <div id="map" style="font-size:13px; width: 500px; height: 300px"></div>
- <div id="sidebar" style="font-size:13px; border: 1px solid #808080; padding: 4px;
- width:120px; height:290px; overflow:auto;"></div> �i��300px�|(border: 1px�{padding: 4px)�~2�j
- �L��\�����s���������n�}���d�˂ĕ\����lj����Ă��܂��B
Google Maps JavaScript API Example
|
�� �i��������1�j��L�v���O�����̃T�C�h�o�[���ڂɃA�C�R����lj�����B�����o�����ŏ�����\������
���v���O�������́u//�����A�C�R���̍쐬�ƃT�C�h�o�[�t���}�[�J�[�쐬�v�����ɁA
- �A�C�R����lj�����ꍇ�́A����̍s��lj��E�ύX���܂��B
- �����o�����ŏ�����\������ꍇ�́A������̍s��lj����܂��B�i�\������鐁���o���͍Ō�ɋL�q����addMarker���̃}�[�J�[�̐����o���ɂȂ�܂��B��̗�ł́u���͌v�j
//�����A�C�R���̍쐬�ƃT�C�h�o�[�t���}�[�J�[�쐬
function addMarker(markerName,lat,lng,html,icon) {
if(icon == ""){
//�f�t�H���g�A�C�R���i�h�b�g�t�ԁj
var marker = new GMarker(new GLatLng(lat,lng));
�� iconURL="./red-dot.png";
} else if(icon == "blueWD" || icon == "greenWD" || icon == "yellowWD" ||
icon == "purpleWD" || icon == "orangeWD" || icon == "pinkWD" ||
icon == "ltblueWD" || icon == "redND" || icon == "blueND" ||
icon == "greenND" || icon == "yellowND" || icon == "purpleND" ||
icon == "orangeND" || icon == "pinkND"){
//���[�W�A�C�R���i�h�b�g�t:��,��,��,��,��,��,����,���h�b�g��:��,��,��,��,��,��,���j
icon = icon.replace("WD","-dot"); //�A�C�R���t�@�C��������
icon = icon.replace("ND","");
var largeIcon = new GIcon(G_DEFAULT_ICON); //���[�W�A�C�R���쐬
largeIcon.image = "./"+icon+".png"; //�A�C�R���摜��URL
largeIcon.iconSize = new GSize(32, 32); //�A�C�R���摜�̃T�C�Y
var marker = new GMarker(new GLatLng(lat,lng),{icon:largeIcon});
�� iconURL="./"+icon+".png";
} else if(icon == "red" || icon == "blue" || icon == "green" ||
icon == "yellow" || icon == "purple" || icon == "orange" ||
icon == "white" || icon == "gray" || icon == "black"){
//�~�j�A�C�R����,��,��,��,��,��,��,�D,��
var miniIcon = new GIcon(baseIcon); //�~�j�A�C�R���쐬
miniIcon.image = "./mm_20_"+icon+".png"; //�A�C�R���摜��URL
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
�� iconURL="./mm_20_"+icon+".png";
} else {alert("�A�C�R�� "+icon+" �̎w��~�X�ł�");}
//�}�[�J�[���N���b�N����ƃ}�[�J�[��markerName�̏��E�B���h�E��\������
GEvent.addListener(marker,"click",function(){dispMarker(markerName)});
map.addOverlay(marker); //�}�[�J�[��n�}�ɃI�[�o���C�\��
markerList[markerName] = marker; //�}�[�J�[��marker���X�g�ɒlj�
htmlList[markerName] = html; //html����html���X�g�ɒlj�
//�T�C�h�o�[��sidebar���X�g�ɒlj�
�� sidebarList += ''+markerName+' ';
���� //�}�[�J�[�ɋ[���I�ɃN���b�N���ꂽ�C�x���g��������
���� GEvent.trigger(marker,"click");
}
//�}�[�J�[�lj�
|
�� �i��������2�j�A�C�R��1�ŕ\������ꍇ�̓A�C�R����`���P��ōςނ̂ŃX�s�[�h�A�b�v���}��܂�
���v���O�������́u//�~�j�A�C�R���p�x�[�X�A�C�R���̍쐬�v����u//�}�[�J�[�lj��v�܂łƉ��L�����ւ��܂��B
�i���j�A�C�R���̐F��ύX�������ꍇ�́A�Y���A�C�R��������������Łu//�A�C�R���摜��URL�v��./mm_20_red.png�́ured�v���ublue�v�ugreen�v�uyellow�v�uwhite�v�ȂǂɕύX���܂��B
//�~�j�A�C�R���̍쐬�ƃ}�[�J�[�lj��v���O����
var miniIcon = new GIcon(); //�~�j�A�C�R���̍쐬
miniIcon.image = "./mm_20_red.png"; //�A�C�R���摜��URL
miniIcon.shadow = "./mm_20_shadow.png"; //�e�摜��URL
miniIcon.iconSize = new GSize(12, 20); //�A�C�R���摜�̃T�C�Y
miniIcon.shadowSize = new GSize(22, 20); //�e�摜�̃T�C�Y
miniIcon.iconAnchor = new GPoint(6, 20);
//�e�摜�̈ʒu�B�A�C�R���摜�̍��������̑��Έʒu�Ŏ���
miniIcon.infoWindowAnchor = new GPoint(5, 1);
//���E�B���h�E�̈ʒu�B�A�C�R���摜���������̑��Έʒu
//�}�[�J�[�lj��v���O����
function addMarker(markerName,lat,lng,html) {
var marker = new GMarker(new GLatLng(lat,lng),{icon:miniIcon});
GEvent.addListener(marker,"click",function(){dispMarker(markerName)});
map.addOverlay(marker);
markerList[markerName] = marker; //�}�[�J�[���}�[�J�[���X�g�ɒlj�
htmlList[markerName] = html; //html����html���X�g�ɒlj�
//�T�C�h�o�[��sidebar���X�g�ɒlj�
sidebarList += ''+markerName+' ';
//�}�[�J�[�ɋ[���I�ɃN���b�N���ꂽ�C�x���g��������
GEvent.trigger(marker,"click");
}
//�}�[�J�[�lj�
|
|
|