С большой помощью эксперта Google у меня есть HTML-код, который отлично работает при перетаскивании HTML-файла в браузер. Но я не могу заставить его правильно отображаться на нашем сайте Google. Самое близкое, что я нашел, - это отображение раздела окна поиска, но без карты. Попытка разместить HTML прямо на странице не сработает. Оболочка iFrame работать не будет. Ниже приведен HTML-код, если кто-то может помочь:
<!DOCTYPE html>
<html>
<head>
<style>
#panel {
margin: 8px 0;
}
#map-canvas { width:700px; height:700px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(38.497533829342345, -86.4128420767679),
zoom: 11,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: -20 }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "1ET-gDs1z0v1T5LVIjYEMPLLCIhLQ1IRiWhq7IMY"
},
map: map,
styleId: 2,
templateId: 2
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function codeAddress() {
var street = document.getElementById('street').value;
var city = document.getElementById('city').value;
var address = street + ' ' + city + ' Indiana';
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(15);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Unable to locate the address');
}
});
}
</script>
</head>
<body>
<div id="panel">
<span>Enter street address:</span>
<input id="street" type="textbox" value="501 Elm St">
<span>City: </span>
<select id="city">
<option value="Paoli, Indiana">Paoli</option>
<option value="Hardinsburg, Indiana">Hardinsburg</option>
<option value="Orleans">Orleans</option> <option value="Marengo">Marengo</option> <option value="English">English</option> <option value="Campbellsburg">Campbellsburg</option> <option value="Livonia">Livonia</option> <option value="French Lick">French Lick</option>
<option value="West Baden">West Baden</option> <option value="Orangeville">Orangeville</option> <option value="">(Other)</option>
</select>
<input type="button" value="Show address" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>
