Javascript Google Map Sınıfı

Constructor
Harita yaratmak için bir HTML elemanı ve harita parametreleri sağlanır.

Sadece center ve zoom parametrelerini  veren bir örnek şöyle.

function initialize() {
  var params = {
    center: {
      lat: 25,
      lng: -90
    },
    zoom: 4,
  };
  var map = new google.maps.Map(document.getElementById("googlemaps"), params);

Hybrid harita tipini de veren bir örnek şöyle:

var position =new google.maps.LatLng(46.150346, 15.863571);
function initialize ()
{
 var params = {
   center: position,
   zoom: 15,
   mapTypeId:google.maps.MapTypeId.HYBRID
 };
var map = new google.maps.Map(document.getElementById("googleMap"), params);

Roadmap haritia tipini veren bir örnek şöyle

function initialize() {
    
  var params = {
    center: position,
    zoom: 14,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

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

Harita tipini kontrol etmeyi sağlayan bir örnek şöyle

var mapProp = {
  center: x,
  zoom: 4,
  disableDefaultUI: true,
  mapTypeId: layer,
  mapTypeControlOptions: {
    mapTypeIds: [layer]
  }
};
var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);

DOM ile Bağlamak
Initialize isimli javascript metodu pencere açılırken şöyle çağrılır.

function initialize() {
  var mapProp = {
    center: {
      lat: 25,
      lng: -90
    },
    zoom: 4,
  };
  var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);
  ...
}
google.maps.event.addDomListener(window, 'load', initialize);

Marker
Konumu bilinen bir marker şöyle yerleştirilir.

function initialize() {
  ...
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(45.8590, -122.8158),
    animation: google.maps.Animation.DROP,
    map: map,
  });
}

Tıklanan yere marker şöyle yerleştirilir.

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

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

HTML
HTML içinde harita için bir yer şöyle ayrılır.

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googlemaps"></div>