My Monkey Do

A Log of Coding Solutions

Converting Google Maps v2 to v3

by

Problem:

I was given a project where the client switched from using http to https.  Everything worked fine except for their Google Maps page.  The page  had a warning in IE about unsecure mixed content.  This was because Google Maps was pulling from an http (unsecured) address.  It turns out that the Map was using version 2 of Google Maps API which does not support https.  Only version 3 does.

Solution:

Don’t be fooled into thinking this is a straight forward, simple upgrade.  It is not.  This solution is just a log of what I did to get the site from v2 up to v3.  It is in no way  a complete guide.  The site used EWindow instead of the infoWindow because of its customized look.  So I guess the following could be a rough step-by-step guide to converting the Ewindow script to v3.


In general you’ll need to replace all “G” prefixes like “GSize” with “google.maps” like “google.maps.Size”.

Replace GSize with google.maps.Size
Replace GLatLng with google.maps.LatLng
Replace GPoint with google.maps.Point
Replace GOverlay with google.maps.Overlay

Replace “new google.maps.Overlay” with “new google.maps.OverlayView()”

Take out or replace GBrowserIsCompatible. There is no equivalent function in v3.

Replace

map = new GMap2(document.getElementById("map_canvas"))

with something like:

    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Replace a custom icon marker using the icon-complex example:
http://code.google.com/apis/maps/documentation/javascript/examples/icon-complex.html

Before the change:

var tinyIcon = new GIcon();
tinyIcon.image = "images/gmap/marker.gif";
tinyIcon.iconSize = new google.maps.Size(22, 22);
tinyIcon.iconAnchor = new google.maps.Point(11, 11);
tinyIcon.infoWindowAnchor = new google.maps.Point(0, 0);
var myLatLng = new google.maps.LatLng(loc['lat'], loc['lng']);
var marker = new GMarker(myLatLng, { icon:tinyIcon });
GEvent.addListener(marker, showWindow, mouseover);
map.addOverlay(marker);

After:

var image = new google.maps.MarkerImage('images/gmap/marker.gif',
  // This marker is 20 pixels wide by 32 pixels tall.
  new google.maps.Size(22, 22),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 0,32.
  new google.maps.Point(11, 11));

var myLatLng = new google.maps.LatLng(loc['lat'], loc['lng']);
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    shadow: shadow,
    icon: image
});
google.maps.event.addDomListener(marker,'mouseover', showWindow);

Replace getPoint to getPosition

var vx = marker.getIcon().iconAnchor.x - marker.getIcon().infoWindowAnchor.x;
var vy = marker.getIcon().iconAnchor.y - marker.getIcon().infoWindowAnchor.y;
this.openOnMap(marker.getPoint(), html, new google.maps.Point(vx,vy));

For infoWindowAnchor I could not find an equivalent so I scratched the whole calculation and just put in a hard coded value.

var vx = 10;
var vy = 10;
this.openOnMap(marker.getPosition(), html, new google.maps.Point(vx,vy));

Replace initialize:

EWindow.prototype.initialize = function(map) {

With onAdd:

EWindow.prototype.onAdd = function() {

Replace map.addOverlay(object) by moving a similar call to within the object.

map.addOverlay(ewindow)

To this within the object:

this.setMap(map)

Replace map.getPane()

map.getPane(G_MAP_FLOAT_SHADOW_PANE)

With this:

this.getPanes().mapPane

Replace this.redraw

this.redraw

with this.draw

this.draw

Replace Overlay.getZindex

var z = google.maps.Overlay.getZIndex(this.point.lat());

I could not find an equivalent to getZIndex so, again, it’s somewhat hard coded.

// you may need to work on this "hack" to replace V2 getZindex
// GOverlay.getZIndex(this.point.lat());
var z = 1000*(90-this.point.lat());
this.div_.style.zIndex = parseInt(z);

Replace this.map.fromLatLngToDivPixel

var p = this.map.fromLatLngToDivPixel(this.point);

With this:

var proj = this.getProjection();
var p = proj.fromLatLngToDivPixel(this.point);

Replace map.panBy(Size) to map.panBy(x:number, y:number)

map.panBy(new google.maps.Size(pan_right, pan_up));

With this:

map.panBy(-pan_right, -pan_up);

A very helpful site was one that made google maps compatible for both versions:
http://notebook.kulchenko.com/maps/google-maps-using-multiple-api-versions

And of course the Google Maps v3 Examples and API docs helped a great deal.  It may also help to look at version 2 of the API so that you can try and find something equivalent.

I uploaded a converted EWindow.js for whoever needs a google maps v3 version of EWindow.

Resizing Background Image

by

Demo: Resizing Background Image Demo

Problem:

I’ve been given a project to make a background image resize with the browser window size while retaining its ratio, not causing scrollbars, and always filling up the whole window.  It seems pretty easy until you actually see it.  Here’s a real life example of it:  http://ringvemedia.com/.  As you can see it pans as the browser is resized larger until a certain point and then it expands.  It never breaks its width to height ratio.

Solution:

The solution is quite simple.  It only involves using some CSS and a table.

First we need to make sure the image doesn’t overflow and cause scrollbars.

html,body,#bg,#bg table,#bg td {
    width:100%;
    height:100%;
    overflow:hidden
}

Then we need to center the div and make sure it’s not too small.

#bg {
    position:absolute;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%;
}

Finally, center the image. I’m not exactly sure why a table is needed in the html, but it does work better in filling the window with it in.

#bg td {
    vertical-align:middle;
    text-align:center;
}

#bg img {
    min-height:50%;
    min-width:50%;
    margin:0 auto;
}

This is some pretty unique css coding and I’ve seen it in a couple places.  Surprisingly (not), it’s the same code at both sites!  I wonder who copied who?  Well, I can’t say I didn’t do that either.

 

Edit Plus

by

EditPlus is a text editor, HTML editor, PHP editor, Java editor and Hex Viewer for Windows. While it can serve as a good Notepad replacement, it also offers many powerful features for Web page authors and programmers.

– http://www.editplus.com

I have been using this editor since starting to program back in 2001.  This editor has met all my needs and wants.  I have not found any other editor that has all of the following features:

  • Ctrl-click – highlights the whole word
  • Right click on a file and have the option of opening it in Edit Plus
  • Simple FTP setup and connection
  • Easy syntax highlighting plugins
  • Word/character change case/etc
  • Brace highlighting
  • Starts up in 1 second or less.
  • Efficient Find All in files.
  • Free*

[typography  size=”10″ size_format=”px”]*technically it is not a free editor, but the 30 day trial expiration does not prevent you from using it over 30 days.  I will pay them some day…. Note: newer versions may not allow this.[/typography]

One of the best features that is in Edit Plus is the Find All in files.  This feature is in many other editors, but the speed of this feature in Edit Plus stands out.  When tracing new code you want to be able to find specific words in many files as fast as possible.  Edit Plus allows you to do this without having to break your train of thought.

Another feature that stands out is the Ctrl-click feature.  This is also available in MS SQL Management Studio.  Holding down the control button while clicking on a word highlights the whole word.  When you need to copy paste a word, you simply hold down ctrl, click, click to your destination, press v (ctrl-v).  The alternative would be double-click, click to your destination, press ctrl-v.  Not very different, but if you copy-paste frequently, it makes a big difference.