gmaps events and position

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 map = {};
var marker = {};
var pos = {top: 50, left: 100};

google.maps.event.addDomListener(window, 'load', function(){
    console.log('in load');
    
    initMap();
    positionMap();
});

google.maps.event.addDomListener(window, 'resize', function(){
    console.log('in resize');
    
    positionMap();
});


function initMap() {
    var myOptions = {
        center: new google.maps.LatLng(47.260071, 11.404705),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        draggable: false,
        mapTypeControl: false,
        zoomControl: false,
        scaleControl: false,
        scrollwheel: false
    };

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

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(47.260071, 11.404705),
        map: map,
        title: 'Ă–sterreichisches Rotes Kreuz Innsbruck'
    });
}

function getPixelOffset(map, marker) {
    // 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)
    );
    return pixelOffset;
}

function positionMap() {
    // FIXME:
    var arrowPos = pos;
    //var arrowPos = $("#map-center").position();
        
    console.log(arrowPos);



    // Wait until the map is initialized
    var listener = google.maps.event.addListener(map, "idle", function() { 
        console.log('in idle');
        
        var pixelOffset = getPixelOffset(map, marker);

        // Do the pan
       ...