Google Map

Markers

by Ryan Morris

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 300px;
    width:100%;
}

JavaScript

var myLatlng = new google.maps.LatLng(33.019722, -96.699167);

var mapOptions = {
    zoom: 15,
    center: myLatlng
}

var map = new google.maps.Map(
    document.getElementById('map-canvas'), 
    mapOptions
);

// add a Marker? Sure...
var marker = new google.maps.Marker({
    position: myLatlng,    
    title: "Hello, Plano!",
    map: map
});

// register some event handlers

google.maps.event.addListener(map, 'center_changed', function() {
    
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
    
  });

google.maps.event.addListener(marker, 'click', function() {
    console.log("Marker clicked");
});