Coding Archives - Page 30 of 30

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.

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.