Created
March 26, 2012 04:00
-
-
Save hissy/2202872 to your computer and use it in GitHub Desktop.
Show Multiple Markers on Google Map from JSON
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function(){ | |
jQuery("#map").each(function(){ | |
SpotSearchMap = new SpotSearchMapObj(36.5626,136.362305, 8); | |
}); | |
}); | |
var Marker; | |
var SpotSearchMap; | |
var SpotSearchMapObj = Class.create(); | |
SpotSearchMapObj.prototype = { | |
initialize: function(lat,lng,zoom){ | |
// 地図設定 | |
var latlng = new google.maps.LatLng(lat,lng); | |
var myOptions = { | |
zoom: zoom, | |
center: latlng, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
//地図の作成 | |
this.map = new google.maps.Map($('map'),myOptions); | |
//マーカー表示 | |
this.spotSearch(); | |
}, | |
changeCenter: function(lat,lng){ | |
this.point = new google.maps.LatLng(lat,lng); | |
this.map.panTo(this.point); | |
Marker.setPosition(this.point); | |
}, | |
panTo: function(point){ | |
this.map.panTo(point); | |
Marker.setPosition(point); | |
}, | |
addSpotMarker: function(title,link,image,lat,lng,date,time){ | |
var spoint = new google.maps.LatLng(lat,lng); | |
var smarker = new google.maps.Marker({ | |
position: spoint, | |
map: this.map, | |
title: title, | |
icon: '/img/marker.png' | |
}); | |
var f = '<div style="width:200px;height:200px;"><a href="'; | |
f += link; | |
f += '">'; | |
f += title; | |
f += '</a><br /><a href="'; | |
f += link; | |
f += '"><img src="'; | |
f += image; | |
f += '" alt="'; | |
f += title; | |
f += '" /></a><br />'; | |
f += date; | |
f += '掲載 | '; | |
f += time; | |
f += '</div>'; | |
var infowindow = new google.maps.InfoWindow({ | |
content: f | |
}); | |
// マーカークリック時にアクションウィンドウ表示 | |
google.maps.event.addListener(smarker, "click", function(){ | |
infowindow.open(this.map,smarker); | |
}); | |
google.maps.event.addListener(infowindow, "position_changed", function(){ | |
infowindow.close(); | |
}); | |
}, | |
spotSearch: function(){ | |
jQuery.getJSON("getmap.php?format=json",function(json){ | |
if(json.items){ | |
for(i=0;i<json.items.length;i++){ | |
title = json.items[i].title; | |
link = json.items[i].link; | |
image = json.items[i].image; | |
lat = json.items[i].geo.coordinates[0]; | |
lng = json.items[i].geo.coordinates[1]; | |
date = json.items[i].pubDate; | |
time = json.items[i].time; | |
SpotSearchMap.addSpotMarker(title,link,image,lat,lng,date,time); | |
} | |
} | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment