私はjavascriptにあまり精通していないので、グーグルマップAPIに困惑しています。これが私のコードです：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/wide.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Orange Lizards - Atlanta, GA</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br />
<table width="865" border="0" align="center" cellpadding="4" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF"><img src="images/header_logo.png" width="865" height="156" /></td>
</tr>
<tr>
<td bgcolor="#FF9900" style="padding-left: 20px;"><div align="center" class="whiteThirteenBold"><a href="index.html" class="white">HOME</a> <a href="our_contractors.html" class="white">OUR CONTRACTORS </a> <a href="contact_us.html" class="white">CONTACT US</a> <a href="wol1_concept.html" class="white">WHY ORANGE LIZARDS</a></div></td>
</tr>
<tr>
<td width="629" valign="top" bgcolor="#FFFFFF" style="padding-left: 20px; padding-right: 20px; padding-top: 10px;"><!-- InstanceBeginEditable name="Body" -->
<p class="splash2">Map Wide</p>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCmryDuU2lmu2kImnSi8UbrVog3ynxYC_k&sensor=false"></script>
<style type="text/css">
html, body { height: 400px; width: 500px; }
</style>
<script type="text/javascript">
//<![CDATA[
function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(33.805932,-84.340582),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
setMarkers(map, beaches);
}
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://orangelizards.com/images/mapicons/trim_logo.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(40, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
function getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
iconColor = "red";
}
if (!icons[iconColor]) {
icons[iconColor] = new google.maps.MarkerImage("http://orangelizards.com/images/mapicons/"+ iconColor +".png",
// This marker is 40 pixels wide by 40 pixels tall.
new google.maps.Size(40, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 34));
}
return icons[iconColor];
}
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('mapIcons/trim_logo.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function createMarker(map, latlng, label, html, color) {
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: getMarkerImage(color),
shape: iconShape,
title: label,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Trim Logo', 33.806431,-84.338436, "trim_logo"],
['RPS Logo', 33.805932,-84.340582, "RPS_logo"],
['<a href="http://google.com>Test Test</a>', 33.805147,-84.338565, "rmi_logo"],
];
function setMarkers(map, locations) {
// Add markers to the map
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = createMarker(map,myLatLng,beach[0],beach[0],beach[3]);
}
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
<!-- InstanceEndEditable --></td>
</tr>
<tr bgcolor="#FF9900">
<td><div align="center" class="bodyWhite">Copyright © 2012 Orange Lizards Atlanta </div></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>
スクリプトは、それ自体がhtmlファイルにある場合は正常に機能しますが、自分のサイトに投稿すると表示されません。何か案は？また、5つ以上のマーカーを追加すると、混乱するようです。私はjavascriptが苦手なので、助けていただければ幸いです。