<<<<<<< .mine Google Maps tutorial

Google maps tutorial

W najnowszej wersji google maps nie ma obowiązku tworzenia klucza weryfikującego aby używać mapy.

Includowanie biblioteki Google maps

Podstawa zainkludować biblitekę Google maps na naszą strone w sekcji head

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Tworzenie prostej mapy Google

Tutorial ten przedstawia jak należy zainkludować kodu javascript tworzący mapę Google.

  
    function mapaA() {
    var myLatlng = new google.maps.LatLng(50.397, 20.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("mapaA"), myOptions);
  }

  <div id="mapaA" style="width:800px; height:600px; border : 1px solid blue;"></div>
  <input type="submit" value="Mapa"  onclick="mapaA()" />

Ścieżka na Google mapie.

Tutorialprzedstawia jak utworzyć ścieżki na mapie google.

 
 function mapaB() {
    var myLatlng = new google.maps.LatLng(50.397, 20.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("mapaB"), myOptions);
    
  var flightPlanCoordinates = [
    new google.maps.LatLng(49.890542, 20),
    new google.maps.LatLng(50.890542, 20),
    new google.maps.LatLng(50.890542, 23)
    
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
  }

  <div id="mapaB" style="width:800px; height:600px; border : 1px solid blue;"></div>
  <input type="submit" value="Mapa"  onclick="mapaB()" />

Wstawianie markerów na mapie Google

Tworzenie markerów na mapie Google google.maps.Marker


  function mapaC() {
    var myLatlng = new google.maps.LatLng(50.397, 20.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("mapaC"), myOptions);

    var markerLatLng = new google.maps.LatLng(50.890542, 20.1);
    
    var marker = new google.maps.Marker({
      position: markerLatLng, 
      map: map, 
      icon: 'flag.png',
      title:"Hello World!"
    });   

 google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng, map);
  });

  }

  function placeMarker(location, map) {
    var clickedLocation = new google.maps.LatLng(location);
    var marker = new google.maps.Marker({
      position: location, 
      map: map
  });
}


  <div id="mapaC" style="width:800px; height:600px; border : 1px solid blue;"></div>
  <input type="submit" value="Mapa"  onclick="mapaC()" />

Dymki nad markerem na mapie google


  function mapaD() {
    var myLatlng = new google.maps.LatLng(50.397, 20.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("mapaC"), myOptions);

    var markerLatLng = new google.maps.LatLng(50.890542, 20.1);
    var marker = new google.maps.Marker({
      position: markerLatLng, 
      map: map, 
      icon: 'flag.png',
      title:"Hello World!"
    });   

    var contentString = 'Opis: &lt;img width="200px" src="h.jpg" /&gt;';
    var infoWindow = new google.maps.InfoWindow({
      content: contentString
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
    infoWindow.open(map,marker);
    });  
    google.maps.event.addListener(marker, 'mouseout', function() {
    infoWindow.close();
    });  
  }


  <div id="mapaD" style="width:800px; height:600px; border : 1px solid blue;"></div>
  <input type="submit" value="Mapa"  onclick="mapaD()" />

Wyznaczanie trasy podróży na mapie

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var dluga = new google.maps.LatLng(50.067910653813236, 19.938511848449707);
var rynek = new google.maps.LatLng(50.05405277962895, 19.934048652648926);

function mapaE() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var myOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: dluga
  }
  map = new google.maps.Map(document.getElementById("mapaE"), myOptions);
  directionsDisplay.setMap(map);
  
  var markerDluga = new google.maps.Marker({
      position: dluga, 
      map: map, 
      icon: 'flag.png',
      title:"Biuro"
    });   
    
  var markerRynek = new google.maps.Marker({
      position: rynek, 
      map: map, 
      icon: 'flag.png',
      title:"Wawel"
    });     
}
  
function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: dluga, 
      destination: rynek,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.DirectionsTravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

Mode of Travel:

======= Google Maps tutorial