AppController.j

import <Foundation/CPObject.j>
import "GoogleMapsView.j"
import "GoogleMapsControllerView.j"


@implementation AppController : CPObject
{
}

- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
    CPLogRegister(CPLogConsole);
    
    var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask],
        contentView = [theWindow contentView],
        bounds = [contentView frame];
    
    [theWindow setAcceptsMouseMovedEvents:YES];
    
    // Google Maps
    var gmapView = [[GoogleMapsView alloc] initWithFrame:bounds centerLat:48.858228 centerLng:2.294608 zoomLevel:17]
    [gmapView setAutoresizingMask:  CPViewHeightSizable | CPViewWidthSizable];
    [gmapView setMapType:G_SATELLITE_MAP];
    [contentView addSubview:gmapView];
    
    // A View to control the map
    var gmapControllerView = [[GoogleMapsControllerView alloc] initWithMapView:gmapView];
    [contentView addSubview:gmapControllerView];
    
    [theWindow orderFront:self];
    
}

@end

function log(msg, level) {
  CPLog(msg, ["debug", "fatal"][level || 0], "GMaps");
};

GoogleMapsControllerView.j

@implementation GoogleMapsControllerView : CPView
{
    GoogleMapsView _mapView;
    CPPoint        _mouseDown;
    BOOL _alreadyScrolling;
}

- (id)initWithMapView:(GoogleMapsView)mapView
{
    [mapView frame];
    self = [super initWithFrame:[mapView frame]];
    if (self)
    {
        _mapView = mapView;
        [self setAutoresizingMask:[mapView autoresizingMask]];
    }
    return self;
}


- (GoogleMapsView)mapView
{
    return _mapView;
}

- (void)setMapView:(GoogleMapsView)mapView
{
    _mapView = mapView;
}

- (void)mouseDown:(CPEvent)anEvent
{
    if ([anEvent clickCount] == 2)
    {
        
        [_mapView zoomInAndSetCenter:[self eventPointToLatLng:anEvent]];
    }
    else
    {
        _mouseDown = [self convertPoint:[anEvent locationInWindow] fromView:[[anEvent window] contentView]];
    }
    
}

- (id)mouseUp:(CPEvent)anEvent
{
    _mouseDown = nil;
}

- (id)mouseMoved:(CPEvent)anEvent
{
    // var pointerPosition = [self convertPoint:[anEvent locationInWindow] fromView: [[anEvent window] contentView]]
    // log(pointerPosition.x + ' ' + pointerPosition.y);
}

- (id)mouseDragged:(CPEvent)anEvent
{
    if (_mouseDown)
    {
        var actualPoint = [self convertPoint:[anEvent locationInWindow] fromView: [[anEvent window] contentView]];
        var newRelativeCenter  = CGPointMake(CGRectGetWidth([self frame])/2 - (actualPoint.x - _mouseDown.x), CGRectGetHeight([self frame])/2 - (actualPoint.y - _mouseDown.y))
        var actualLatLngCenter = [_mapView fromContainerPixelToLatLng:newRelativeCenter];
        [_mapView setCenter:actualLatLngCenter];
        _mouseDown = actualPoint;
    }
}

- (void)keyDown:(CPEvent)anEvent
{
    
    // ZoomIn with +
    if ([anEvent keyCode] == 187 && ![anEvent isARepeat]) {
        [_mapView zoomIn];
    }
    
    // ZoomOut with -
    if ([anEvent keyCode] == 189 && ![anEvent isARepeat]) {
        [_mapView zoomOut];
    }
}

- (id)scrollWheel:(CPEvent)anEvent
{
    if (_alreadyScrolling)
        return;
    
    if ([anEvent deltaY] > 3)
    {
        [_mapView zoomOut];
        _alreadyScrolling = true;
        setTimeout(function(){ _alreadyScrolling = false }, 100);
    }
    if ([anEvent deltaY] < -3)
    {
        [_mapView zoomIn];
        _alreadyScrolling = true;
        setTimeout(function(){ _alreadyScrolling = false }, 100);
    }
}

- (id)eventPointToLatLng:(CPEvent)anEvent
{
    return [_mapView fromContainerPixelToLatLng:[self convertPoint:[anEvent locationInWindow] fromView: [[anEvent window] contentView]]];
}


- (BOOL)acceptsFirstResponder
{
   return YES;
}


@end

GoogleMapsView.j

@implementation GoogleMapsView : CPView
{
    GMap2   _map;
    GLatLng _center;
    int     _zoomLevel;
}

- (id)initWithFrame:(CGRect)aFrame centerLat:(float)centerLat centerLng:(float)centerLng zoomLevel:(int)zoomLevel
{
    self = [super initWithFrame:aFrame];
    if (self)
    {
        _center = new GLatLng(centerLat, centerLng);
        _zoomLevel = zoomLevel;
        _map = new GMap2(_DOMElement);
        
        log(_map.enableContinuousZoom);
        log(_map.enableScrollWheelZoom);
        
        _map.enableContinuousZoom();
        _map.enableScrollWheelZoom();
        setTimeout(function(){
            // Got to do this because map doesn't see it's div size at first
            // and on the first setCenter (needed to call checkResize)
            // it centers in a small frame at the top left of the page
            // This is a quick hack to get things going, a better solution
            // must exist!
            [self refreshCenter];
            [self checkResize];
            [self refreshCenter];
        }, 100);
    }
    return self;
}


- (id)initWithFrame:(CGRect)aFrame
{
    self = [super initWithFrame:aFrame];
    if (self)
    {
        _map = new GMap2(_DOMElement);
    }
    return self;
}





- (id)initWithFrame:(CGRect)aFrame boundsLatLngs:(CPArray)boundsLatLngs
{
    self = [self initWithFrame:aFrame];
    if (self)
    {
        bounds = new GLatLngBounds();
        for(var i = 0 ; i < [boundsLatLngs count] ; i++)
        {
            var latlng = new GLatLng(boundsLatLngs[i].lat, boundsLatLngs[i].lng);
            bounds.extend(latlng);
        }
        
        _center = bounds.getCenter();
        _map = new GMap2(_DOMElement);
        
        setTimeout(function(){
            // Got to do this because map doesn't see it's div size at first
            // and on the first setCenter (needed to call checkResize)
            // it centers in a small frame at the top left of the page
            _zoomLevel = _map.getBoundsZoomLevel(bounds);
            [self refreshCenter];
            [self checkResize];
            _zoomLevel = _map.getBoundsZoomLevel(bounds);
            [self refreshCenter];
        }, 100);
    }
    return self;
}




- (int)zoomLevel
{
    _zoomLevel = _map.getZoom();
    return _zoomLevel;
}

- (void)setZoomLevel:(int)aZoomLevel
{
    _zoomLevel = ROUND(aZoomLevel);
    [self refreshCenter];
}



- (CPPoint)center
{
    _center = _map.getCenter();
    return CPPointMake(_center.lng(), _center.lat());
}

- (void)setCenter:(CPPoint)aLatLngAsAPoint
{
    _center = new GLatLng(aLatLngAsAPoint.y, aLatLngAsAPoint.x);
    [self refreshCenter];
}


- (void)zoomInAndSetCenter:(CPPoint)aLatLngAsAPoint
{
    _map.zoomIn();
    _zoomLevel = _map.getZoom();
    _center = new GLatLng(aLatLngAsAPoint.y, aLatLngAsAPoint.x);
    [self refreshCenter];
}

- (id)zoomOutAndSetCenter:(CPPoint)aLatLngAsAPoint
{
    _map.zoomOut();
    _zoomLevel = _map.getZoom();
    _center = new GLatLng(aLatLngAsAPoint.y, aLatLngAsAPoint.x);
    [self refreshCenter];
}

- (void)zoomOut
{
    _map.zoomOut()
    _zoomLevel = _map.getZoom();
    [self refreshCenter];
}

- (void)zoomIn
{
    _map.zoomIn();
    _zoomLevel = _map.getZoom();
    [self refreshCenter];
}





- (void)setMapType:(id)aMapType
{
    _map.setMapType(aMapType);
}

- (GMapType)getCurrentMapType
{
    return _map.getCurrentMapType();
}

- (CPArray)getMapTypes
{
    return _map.getMapTypes();
}

- (void)addMapType:(GMapType)aMapType
{
    _map.addMapType(aMapType);
}

- (void)removeMapType:(GMapType)aMapType
{
    _map.removeMapType(aMapType);
}




- (CPPoint)fromContainerPixelToLatLng:(CPPoint)aPoint
{
    var latlng = _map.fromContainerPixelToLatLng(aPoint);
    return CPPointMake(latlng.lng(), latlng.lat());
}

- (CPPoint)fromLatLngToContainerPixel:(CPPoint)aLatLngAsAPoint
{
    var pixel = _map.fromLatLngToContainerPixel(new GLatLng(aLatLngAsAPoint.y, aLatLngAsAPoint.x));
    return pixel;
}





- (void)checkResize
{
    _map.checkResize();
}


- (void)refreshCenter
{
    if (_center != _map.getCenter() || _zoomLevel != _map.getZoom())
    {
        _map.setCenter(_center, _zoomLevel);
    }
}

- (void)forceRefreshCenter
{
    _map.setCenter(_center, _zoomLevel);
}

@end

index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
    <head>
    
        <title>Google Maps Lib</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=abcdef" type="text/javascript"></script>
        
        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
                
        <script type = "text/javascript">
        
            objj_import("main.j", YES, function() { main(); });
        </script>
        
    </head>
    
    <body>
		<div style="position: absolute; left: 50%; top: 50%;">
		    <center>
		    	<img src = "Frameworks/AppKit/Resources/CPProgressIndicator/CPProgressIndicatorSpinningStyleRegular.gif" style="left: -32px; position: relative; top: -32px;" />
		    </center>
		</div>
    </body>
    
</html>