Skip to content

Instantly share code, notes, and snippets.

@hissy
Created March 26, 2012 04:00
Show Gist options
  • Save hissy/2202872 to your computer and use it in GitHub Desktop.
Save hissy/2202872 to your computer and use it in GitHub Desktop.
Show Multiple Markers on Google Map from JSON
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