Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="map" style="border: 2px solid #3872ac;"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
CSS
Autoformát
CSS reset
Až na konci
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js&key=AIzaSyD2yeLOJOCOVgB4uox_Mz9ELZID4tcAlK4"></script> <script> var map; var icon = ""; var json = "https://api.myjson.com/bins/xnie4"; var infowindow = new google.maps.InfoWindow(); function initialize() { var mapProp = { center: new google.maps.LatLng(49.8037633, 15.4749126), zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), mapProp); var markerCluster; $.getJSON(json, function(json1) { var markers = []; $.each(json1.places, function(key, data) { var latLng = new google.maps.LatLng(data.latitude, data.longitude); var marker = new google.maps.Marker({ position: latLng, map: map, // icon: icon, title: data.title }); markers.push(marker); var details = data.name; bindInfoWindow(marker, map, infowindow, details); }); markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); }); } function bindInfoWindow(marker, map, infowindow, strDescription) { google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(strDescription); infowindow.open(map, marker); }); } google.maps.event.addDomListener(window, 'load', initialize);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>