【googlemapAPI】地図表示・マーカー表示・ウィンドウ表示
hotpepperAPIを利用して検索したお店たちを、googlemapAPIを利用してマッピングする。
以下↓で公開したソースに入れました。
http://d.hatena.ne.jp/midori_kasugano/20090521/1242975139
print <<"HTML"; <html> <head> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAXhkFw77aLRSh_UNrhJEHART2yXp_ZAY8_ufC3CFXhHIE1NvwkxRkGUIY1TSG7kQX0tzrz-PT5M-uEw" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); HTML my $shop = $res->{results}{shop}[0]; my $lat = $shop->{lat}; my $lng = $shop->{lng}; print "map.setCenter(new GLatLng($lat, $lng), 10);\n"; foreach my $shop (@{$res->{results}{shop}}){ print qq( var point = new GLatLng($shop->{lat},$shop->{lng}); var marker = new GMarker(point); map.addOverlay(marker); marker.bindInfoWindow(document.createTextNode("$shop->{name}")); ); #print "var point = new GLatLng($shop->{lat},$shop->{lng});\n"; #print "map.addOverlay(new GMarker(point));\n"; #print "marker.openInfoWindow(point, document.createTextNode(\"HELLO\"));\n"; } print <<"HTML2"; } } </script>