I was given a project where the client switched from using http to https. \u00a0Everything worked fine except for their Google Maps page. \u00a0The page \u00a0had a warning in IE about unsecure mixed content. \u00a0This was because Google Maps was pulling from an http (unsecured) address. \u00a0It turns out that the Map was using version 2 of Google Maps API which does not support https. \u00a0Only version 3 does.<\/p>\n
Don’t be fooled into thinking this is a straight forward, simple upgrade. \u00a0It is not. \u00a0This solution is just a log of what I did to get the site from v2 up to v3. \u00a0It is in no way \u00a0a complete guide. \u00a0The site used EWindow instead of the infoWindow because of its customized look. \u00a0So I guess the following could be a rough step-by-step guide to converting the Ewindow script to v3.<\/p>\n
In general you’ll need to replace all “G” prefixes like “GSize” with “google.maps” like “google.maps.Size”.<\/strong><\/p>\n Replace GSize with google.maps.Size Replace “new google.maps.Overlay” with “new google.maps.OverlayView()”<\/strong><\/p>\n Take out or replace GBrowserIsCompatible. There is no equivalent function in v3.<\/strong><\/p>\n Replace<\/strong><\/p>\n with something like:<\/p>\n Replace a custom icon marker using the icon-complex example<\/strong>: Before the change:<\/p>\n After:<\/p>\n Replace getPoint to getPosition<\/strong><\/p>\n For infoWindowAnchor I could not find an equivalent so I scratched the whole calculation and just put in a hard coded value.<\/p>\n Replace initialize:<\/strong><\/p>\n With onAdd:<\/p>\n Replace map.addOverlay(object) by moving a similar call to within the object.<\/strong><\/p>\n To this within the object:<\/p>\n Replace map.getPane()<\/strong><\/p>\n With this:<\/p>\n Replace this.redraw<\/strong><\/p>\n with this.draw<\/p>\n Replace Overlay.getZindex<\/strong><\/p>\n I could not find an equivalent to getZIndex so, again, it’s somewhat hard coded.<\/p>\n Replace this.map.fromLatLngToDivPixel<\/strong><\/p>\n With this:<\/p>\n Replace map.panBy(Size) to map.panBy(x:number, y:number)<\/strong><\/p>\n With this:<\/p>\n A very helpful site was one that made google maps compatible for both versions: And of course the Google Maps v3 Examples and API<\/a> docs helped a great deal. \u00a0It may also help to look at version 2 <\/a>of the API so that you can try and find something equivalent.<\/p>\n I uploaded a converted EWindow.js for whoever needs a google maps v3 version of EWindow.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[2],"tags":[27,39],"yoast_head":"\n
\n<\/strong><\/p>\n
\nReplace GLatLng with google.maps.LatLng
\nReplace GPoint with google.maps.Point
\nReplace GOverlay with google.maps.Overlay<\/p>\nmap = new GMap2(document.getElementById(\"map_canvas\"))<\/pre>\n
var myOptions = {\n zoom: 4,\n center: myLatlng,\n mapTypeId: google.maps.MapTypeId.ROADMAP\n }\n map = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);<\/pre>\n
\n http:\/\/code.google.com\/apis\/maps\/documentation\/javascript\/examples\/icon-complex.html<\/a><\/p>\nvar tinyIcon = new GIcon();\ntinyIcon.image = \"images\/gmap\/marker.gif\";\ntinyIcon.iconSize = new google.maps.Size(22, 22);\ntinyIcon.iconAnchor = new google.maps.Point(11, 11);\ntinyIcon.infoWindowAnchor = new google.maps.Point(0, 0);\nvar myLatLng = new google.maps.LatLng(loc['lat'], loc['lng']);\nvar marker = new GMarker(myLatLng, { icon:tinyIcon });\nGEvent.addListener(marker, showWindow, mouseover);\nmap.addOverlay(marker);<\/pre>\nvar image = new google.maps.MarkerImage('images\/gmap\/marker.gif',\n \/\/ This marker is 20 pixels wide by 32 pixels tall.\n new google.maps.Size(22, 22),\n \/\/ The origin for this image is 0,0.\n new google.maps.Point(0,0),\n \/\/ The anchor for this image is the base of the flagpole at 0,32.\n new google.maps.Point(11, 11));\n\nvar myLatLng = new google.maps.LatLng(loc['lat'], loc['lng']);\nvar marker = new google.maps.Marker({\n position: myLatLng,\n map: map,\n shadow: shadow,\n icon: image\n});\ngoogle.maps.event.addDomListener(marker,'mouseover', showWindow);<\/pre>\nvar vx = marker.getIcon().iconAnchor.x - marker.getIcon().infoWindowAnchor.x;\nvar vy = marker.getIcon().iconAnchor.y - marker.getIcon().infoWindowAnchor.y;\nthis.openOnMap(marker.getPoint(), html, new google.maps.Point(vx,vy));<\/pre>\n
var vx = 10;\nvar vy = 10;\nthis.openOnMap(marker.getPosition(), html, new google.maps.Point(vx,vy));<\/pre>\n
EWindow.prototype.initialize = function(map) {<\/pre>\nEWindow.prototype.onAdd = function() {<\/pre>\nmap.addOverlay(ewindow)<\/pre>\n
this.setMap(map)<\/pre>\n
map.getPane(G_MAP_FLOAT_SHADOW_PANE)<\/pre>\n
this.getPanes().mapPane<\/pre>\n
this.redraw<\/pre>\n
this.draw<\/pre>\n
var z = google.maps.Overlay.getZIndex(this.point.lat());<\/pre>\n
\/\/ you may need to work on this \"hack\" to replace V2 getZindex\n\/\/ GOverlay.getZIndex(this.point.lat());\nvar z = 1000*(90-this.point.lat());\nthis.div_.style.zIndex = parseInt(z);<\/pre>\n
var p = this.map.fromLatLngToDivPixel(this.point);<\/pre>\n
var proj = this.getProjection();\nvar p = proj.fromLatLngToDivPixel(this.point);<\/pre>\n
map.panBy(new google.maps.Size(pan_right, pan_up));<\/pre>\n
map.panBy(-pan_right, -pan_up);<\/pre>\n
\n http:\/\/notebook.kulchenko.com\/maps\/google-maps-using-multiple-api-versions<\/a><\/p>\n