Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ukázka vložení mapy Google</title>
  <style>
    #mapa {
      width: 100%;
      height: 400px;
    }
  </style> 
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    function initMap(){
      var mapCanvas = document.getElementById('mapa');
      var adresa = mapCanvas.innerHTML;
      var styles = [
        {
          stylers: [
            { hue: "#00ffe6" },
            { saturation: -20 }
          ]
        },{
          featureType: "road",
          elementType: "geometry",
          stylers: [
            { lightness: 100 },
            { visibility: "simplified" }
          ]
        },{
          featureType: "road",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        }
      ];
      var mapOptions = {
        center: new google.maps.LatLng(49.2020701, 16.5779606),
        zoom: 14,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: styles
      }     
      var map = new google.maps.Map(mapCanvas, mapOptions);
      // pin.png tu není vložen, proto není na mapě vidět
      var markerImage = new google.maps.MarkerImage('pin.png',
        new google.maps.Size(60, 60), //velikost
        new google.maps.Point(0, 0), // bod ukazatele
        new google.maps.Point(30, 30)  // posun ikonky
      );     
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
          'address': adresa
        },
        function(results, status) {
          if(status == google.maps.GeocoderStatus.OK) {
            new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            icon: markerImage
           });
         map.setCenter(results[0].geometry.location);
        }
      });  
      geocoder.geocode({
          'address': 'Duškova, Praha, Česká republika'
        },
        function(results, status) {
          if(status == google.maps.GeocoderStatus.OK) {
            new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            icon: markerImage
           });
        }
      });            
    }
    google.maps.event.addDomListener(window, 'load', initMap);
  </script>
</head>
<body>
  <div id="mapa">Stroupežnického 3191/17, Praha, Czech Republic</div>
</body>
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
maxiorelpro
0viewers