Segítségre lenne szükségem.
A lenti kódban szeretnék olyan módosítást elvégezni, hogy az egy helyen található helyeknél használja a MarkerCluster funkciót. Egész nap nézegettem, de sajnos nem jutottam dűlőre vele. (Nem értek a programozáshoz )
MarkerCluster for v3 Documentation: Examples
A google a következő útmutatókkal rendelkezik, webes kereséseknél szinte mindenki erre hivatkozik. Próbáltam több helyre is beilleszteni a megadott kód részletet, de nem sikerült életet lehelnem bele. Ha valaki tudna segíteni annak nagyon örülnék. Előre is köszönöm.
Kód:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Országos Ingyenes Villanyszerelői Felülvizsgálat</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var defaultCenter = new google.maps.LatLng(47.338823,19.489746);
var defaultZoom = 7;
var tableId = '10k_wPse1bW5IV4rexE3U3s0YLnkxLULvpBsEpXI';
var locationColumn = 'col1';
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: defaultCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId
},
options: {
styleId: 2,
templateId: 3
},
map: map
});
var zoomToAddress = function() {
var address = document.getElementById('address').value;
geocoder.geocode({
address: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(13);
// OPTIONAL: run spatial query to find results within bounds.
var sw = map.getBounds().getSouthWest();
var ne = map.getBounds().getNorthEast();
var where = 'ST_INTERSECTS(' + locationColumn +
', RECTANGLE(LATLNG' + sw + ', LATLNG' + ne + '))';
layer.setOptions({
query: {
select: locationColumn,
from: tableId
// where: where
}
});
} else {
window.alert('Cím nem található, próbálja újra!');
}
});
};
google.maps.event.addDomListener(document.getElementById('search'),
'click', zoomToAddress);
google.maps.event.addDomListener(window, 'keypress', function(e) {
if (e.keyCode == 13) {
zoomToAddress();
}
});
google.maps.event.addDomListener(document.getElementById('reset'),
'click', function() {
map.setCenter(defaultCenter);
map.setZoom(defaultZoom);
layer.setOptions({
query: {
select: locationColumn,
from: tableId
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body><center>
<div id="map-canvas" style="width:700px;height:480px;"></div>
<div><br>
<label>Írja be a keresett várost vagy a pontos címet:</label>
<input type="text" id="address" value="Budapest, HU">
<input type="button" id="search" value="Keress!">
<input type="button" id="reset" value="Alaphelyzet">
</div><br>
<div><b>Amennyiben nem talál villanyszerelőt a kinagyított területen, a bal oldalon található gombokkal kicsinyítse a térképet, hogy nagyobb területet lásson!</b></br><a href="https://www.google.com/fusiontables/embedviz?q=select+col1+from+10k_wPse1bW5IV4rexE3U3s0YLnkxLULvpBsEpXI&viz=MAP&h=false&lat=47.01940695971723&lng=19.77651300359878&t=1&z=8&l=col1&y=2&tmplt=3" target="_blank" title="Teljes képernyős térkép nézet">Térkép teljes képernyős megjelenítéséhez kattintson IDE!</a>
</div>
</center></body>
</html>
Könyvjelzők