gmaps.js console

Play with gmaps.js

by dekkard

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
    display: block;
    width: 100%;
    height: 100%;
}

#map {
    background: #58B;
}

JavaScript

var myOptions = {
        center: new google.maps.LatLng(47.259998, 11.398032),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

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

var arrowLatLng = new google.maps.LatLng(47.260071, 11.404705);
var marker = new google.maps.Marker({
        position: arrowLatLng,
        map: map,
        title: 'Hello World!'
    });

//map.panTo(arrowLatLng);

var arrowPos = { top: 50, left: 100 };

/*
var bounds = new google.maps.LatLngBounds();
bounds.extend(arrowLatLng);
map.fitBounds(bounds);
*/
var listener = google.maps.event.addListener(map, "idle", function() { 
    
    // Calculate marker position in pixels form upper left corner
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
    Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
    Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
    
    console.debug("marker: %o", pixelOffset);
    
    map.panBy(pixelOffset.x - arrowPos.left,
             pixelOffset.y - arrowPos.top);
    
  //if (map.getZoom() > 16) 
  //    map.setZoom(16); 
    
  google.maps.event.removeListener(listener); 
});