xml version=1.0 encoding=UTF-8
!DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN httpwww.w3.orgTRxhtml1DTDxhtml1-transitional.dtd
html xmlns=httpwww.w3.org1999xhtml
head
meta http-equiv=content-type content=texthtml; charset=UTF-8
meta http-equiv=Content-Style-Type content=textcss
titlejQuery+MarkerClusterer V3／Google Maps API V3title
meta name=keywords content=Google Maps API V3,アイコン,マーカー,地図,表示,JSON,形式,MarkerClusterer, V3
meta name=description content=Google Maps API V3でjQuery+JSON+MarkerClusterer V3で複数のマーカーを表示させる
link rel=stylesheet href=layout-5-master.css type=textcss
!--ここからGoogle Maps API v3--
meta name=viewport content=initial-scale=1.0, user-scalable=no
script type=textjavascript src=httpwaox.main.jpmapsjsjquery-1.4.3.jsscript
script type=textjavascript src=httpmaps.google.commapsapijssensor=falsescript
script type=textjavascript src=httpgoogle-maps-utility-library-v3.googlecode.comsvntrunkmarkerclusterersrcmarkerclusterer.jsscript
script type=textjavascript
var markers = [];
var infoWindow;
function initialize()
{
var myOptions =
{
zoom 7,
center new google.maps.LatLng(35.87125, 139.54834),
mapTypeId google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(map_canvas), myOptions);
var kouen = new google.maps.MarkerImage('httpmaps.google.co.jpmapfilesmsiconstree.png', ★マーカ種類
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var kouenshadow = new google.maps.MarkerImage('httpmaps.google.co.jpmapfilesmsiconstree.shadow.png', ★マーカ影
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));;
var onsen = new google.maps.MarkerImage('httpmaps.google.co.jpmapfilesmsiconshotsprings.png', ★マーカ種類
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var onsenshadow = new google.maps.MarkerImage('httpmaps.google.co.jpmapfilesmsiconshotsprings.shadow.png', ★マーカ影
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));;
var suizokukan = new google.maps.MarkerImage('httpmaps.google.co.jpmapfilesmsiconsfishing.png', ★マーカ種類
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var suizokukanshadow = new google.maps.MarkerImage('httpmaps.google.co.jpmapfilesmsiconsfishing.shadow.png', ★マーカ影
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));;
var fields = [
['公園', 35.760191,140.061629,kouen,kouenshadow, 'divテスト テストdiv'],
['公園', 35.643033,139.860592,kouen,kouenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 div'],
['公園', 35.596286,140.141172,kouen,kouenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 div'],
['公園', 35.18201,140.00797,kouen,kouenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp公園astrongdiv'],
['公園', 35.342022,139.341305,kouen,kouenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp公園astrongdiv'],
['温泉', 35.805307,140.16651,onsen,onsenshadow, 'divcimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 divstronga href=httpwaox.main.jp温泉astrongdiv'],
['温泉',35.717602,139.980167,onsen,onsenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp温泉astrongdiv'],
['温泉', 35.42295,139.89739,onsen,onsenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp温泉astrongdiv'],
['温泉', 35.706142,138.652190,onsen,onsenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp温泉astrongdiv'],
['温泉', 35.647086,138.604148,onsen,onsenshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp温泉astrongdiv'],
['水族館', 35.337323,139.646487,suizokukan,suizokukanshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp水族館astrongdiv'],
['水族館', 35.309701,139.479648,suizokukan,suizokukanshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp水族館astrongdiv'],
['水族館',36.333294,140.593817,suizokukan,suizokukanshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp水族館astrongdiv'],
['水族館', 35.442851,139.644607,suizokukan,suizokukanshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp水族館astrongdiv'],
['水族館', 35.588558,139.737433,suizokukan,suizokukanshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp水族館astrongdiv'],
['水族館', 35.728681,139.719765,suizokukan,suizokukanshadow, 'divimg src=httpwaox.main.jpmapsgifwgb29_2.gif width=150 height=150 border=0 stronga href=httpwaox.main.jp水族館astrongdiv']
];
infoWindow = new google.maps.InfoWindow();
for (var i = 0; i fields.length; i++)
{
var field = fields[i];
var myLatLng = new google.maps.LatLng(field[1], field[2]);
var categoryicon = field[3];
var categoryshadow = field[4];
var marker = new google.maps.Marker(
{
position myLatLng,
map map,
icon categoryicon,
shadow categoryshadow,
title field[0]
});
google.maps.event.addListener(marker, 'click', (function(marker, cont)
{
return function()
{
infoWindow.setContent(cont);
infoWindow.open(map, marker);
};
})(marker, field[5]));
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {maxZoom 12, gridSize 100 });
}
jQuery(document).ready( function() {
initialize();
});
script
head
body
div id=maincontainer
!--広告--
p align=centerscript type=textjavascript!--
google_ad_client = ca-pub-6865065121910215;
newsmap
google_ad_slot = 1899775519;
google_ad_width = 728;
google_ad_height = 90;
--
script
script type=textjavascript
src=httppagead2.googlesyndication.compageadshow_ads.js
scriptp
!--広告--
div id=navtoplist
ul
lili
lia href=httpwaox.main.jpnewspage_id=1013 target=_selfMaps V3 トップali
li id=currenta target=_selfjQuery+JSON+MarkerClusterer V3aliul
div
div id=navtoplistline div
div id=contentwrapper
div id=maincolumn
div class=text
!--ここからGoogle Maps API v3--
div id=map_canvasdiv
!--ここまでGoogle Maps API v3--
div
div
div
div
!--広告--
p align=center style=padding-top 5px;padding-bottom 5px;script type=textjavascript!--
google_ad_client = ca-pub-6865065121910215;
newsmap715-15
google_ad_slot = 9732734938;
google_ad_width = 728;
google_ad_height = 15;
--
script
script type=textjavascript
src=httppagead2.googlesyndication.compageadshow_ads.js
scriptp
!--広告--
!-- [i2i] --
span id=noscripttagsnoscripta href=httpac5.i2idata.combinnojslink00412435 target=_blankimg src=httpac5.i2idata.combinnojs.php00412435 border=0 anoscriptspanspan id=prtaglinka href=httpwww.mendou-kenshoku.com target=_blankimg src=httpimage.mendou-kenshoku.combnr.gif00412435 border=0 alt=アンチエイジングの基本 aspan
script type=textjavascript src=httpac5.i2idata.combin2nd_gets.php00412435script
!-- [Google] --
script type=textjavascript
var gaJsHost = ((https == document.location.protocol) httpsssl. httpwww.);
document.write(unescape(%3Cscript src=' + gaJsHost + google-analytics.comga.js' type='textjavascript'%3E%3Cscript%3E));
script
script type=textjavascript
try {
var pageTracker = _gat._getTracker(UA-10371111-17);
pageTracker._trackPageview();
} catch(err) {}
script
!-- [Google] --
body
html