Category Archives: Javascript

Migrate Google Maps from V2 to V3

Google maps v2 has been deprecated since May 19, 2010 and will stop working on May 19, 2013, so here is a little guide on how to migrate.

On V3 we don’t need an API key, but it’s useful to keep track of your API calls (25,000 free), so to get the API key, log into https://code.google.com/apis/console/, click on services and activate google maps v3, once is done click on API access on the left, and go to Simple API at the very bottom, then click on edit allow referers, and set up like *.mysite.com/* that will allow all your subdomains and folders on your site.

Now that you have your API key, is time to replace the old URL, by the new one:

  1.  
  2. <!– V2 –>
  3.  
  4. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=$yourKey" ></script>
  5.  
  6. <!– V3 –>
  7.  
  8. <script src="https://maps.googleapis.com/maps/api/js?key=$youKeu&v=3&sensor=true" type="text/javascript" ></script>
  9.  
  10. <!– "sensor" is required an indicates if a device (like GPS) is used to determine the user’s location –>
  11.  

First get rid of the old unload function, is not needed anymore.

  1.  
  2. /* V2 */
  3. window.onunload=function(){
  4.         GUnload();
  5. }
  6.  

Also get rid of old code used to load Vector Markup Language(VML) just needed for IE, VML has been deprecated on IE9 in favor Scalable Vector Graphic (SVG)

  1.  
  2. <!DOCTYPE html>
  3. <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml>
  4. <head>
  5.         <style type="text/css">
  6.         v\:* {
  7.         behavior:url(#default#VML);
  8.         }
  9.         </style>

Now lets load the map itself.

  • First take out GBrowserIsCompatible is not supported anymore.
  • Replace GMmap2 by google.maps.Map.
  • GLatLng has been replaced by google.maps.LatLng.
  • Now take out addControl, setMapType, now all of these are passed as an object when map is created
  • For V2 we use these map types G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP on V3 they have been replace by google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID ,google.maps.MapTypeId.TERRAIN
  1.  
  2. /* V2 */
  3. if( GBrowserIsCompatible() ) {
  4.         map = new GMap2( $( ‘map’ ) );
  5.         map.addControl(new GMapTypeControl());
  6.         map.addControl(new GOverviewMapControl());
  7.         map.addControl(new GScaleControl());
  8.         map.addControl(new GLargeMapControl());
  9.         map.setCenter( new GLatLng( myLatitude, myLongitude ), 9 /*zoomLevel*/ );
  10.         map.setMapType( G_NORMAL_MAP );
  11.         //map.setMapType( G_SATELLITE_MAP );
  12.         //map.setMapType( G_HYBRID_MAP );
  13. }
  14.  
  15. /* V3 */
  16.  
  17. var mapOptions = {
  18.         zoom: 9 ),
  19.         center: new google.maps.LatLng(myLatitude, myLongitude),
  20.         scaleControl: true,
  21.         overviewMapControl: true,
  22.         overviewMapControlOptions:{opened:true},
  23.         mapTypeId: google.maps.MapTypeId.ROADMAP
  24. };
  25. map = new google.maps.Map($( ‘map’ ), mapOptions);
  26.  

In V3 creating custom icons is a lot easier, instead of creating a special icon object now we can just pass image as url.

  1.  
  2. /* v2 */
  3.  
  4. myIcon = new GIcon();
  5. myIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
  6. myIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  7. myIcon.iconSize = new GSize(12, 20);
  8. myIcon.shadowSize = new GSize(22, 20);
  9. myIcon.iconAnchor = new GPoint(6, 20);
  10. myIcon.infoWindowAnchor = new GPoint(5, 1);
  11. var point = new GLatLng( myLatitude, myLongitude );
  12. myMarker = new GMarker( point, myIcon );
  13.  
  14. /* v3 */
  15.  
  16. var properties = {
  17.         position: new google.maps.LatLng(myLatitude, myLongitude),
  18.         map: map,
  19.         title:‘Testing Icon’,
  20.         icon:‘icon.jpg’,
  21.         shadow:‘shadow.jpg’
  22. };
  23. var marker = new google.maps.Marker(properties);
  24.  
  25. /* icon and shadow can be just a string containg  the image file url, for must complex icons just pass and object with all the properties
  26.   var image = {
  27.     url: ‘images/icon.png’,
  28.     size: new google.maps.Size(20, 32),
  29.     origin: new google.maps.Point(0,0),
  30.     anchor: new google.maps.Point(0, 32)
  31.   };
  32. more info: https://developers.google.com/maps/documentation/javascript/overlays?hl=en#ComplexIcons
  33. */
  34.  
  35.  

clearOverlays has been removed from v3, so if you want remove all your markers from your map, now you have to manually keep track your markers an remove them.

  1.  
  2. /* v2 */
  3. map.clearOverlays();
  4.  
  5. /* v3 */
  6.  
  7. var overlays =  []; // Global array to store marker
  8.  
  9. overlays[overlays.length] = new google.maps.Marker(properties); // store a reference to the marker each time you create one
  10.  
  11. // delete all the markers on the array
  12. function clearOverlays() {
  13.         while(overlays[0]){
  14.                 var overlay = overlays.pop();
  15.                 overlay.setMap(null);
  16.                 overlay = null;
  17.         }
  18. }
  19.  

To create overlay on Google maps V3 now we have to use google.maps.Polyline inseatd of GPolyline.

  1.  
  2. /* V2 */
  3.  
  4. var points = [];
  5. points.push( new GLatLng( latitude1, longitude1 ) );
  6. points.push( new GLatLng( latitude2, longitude2 ) );
  7. points.push( new GLatLng( latitude3, longitude3 ) );
  8. map.addOverlay( new GPolyline( points ) );
  9.  
  10.  
  11. /* V3 */
  12.  
  13. var points = [];
  14. points.push( new google.maps.LatLng( latitude1, longitude1 ) );
  15. points.push( new google.maps.LatLng( latitude2, longitude2 ) );
  16. points.push( new google.maps.LatLng( latitude3, longitude3 ) );
  17. var area = new google.maps.Polyline({path: points, strokeColor: "#FF0000",strokeOpacity: 1.0,strokeWeight: 2});
  18. area.setMap(map);
  19.  
  20.  

On google maps v3 is a lot easier to create custom controls, now we only create a div element an insert it on Google maps.

  1.  
  2. /* V2 */
  3.  
  4. /* we used to create the custom control like */
  5.  
  6. SaveMapsStatus.prototype = new GControl();
  7.        
  8. SaveMapsStatus.prototype.initialize = function(map) {
  9.         var container = document.createElement("div");
  10.         container.id = ‘myId’;
  11.         container.innerHTML = ‘<a href="save.php" ><img src="icon_save.gif" /></a>’;
  12.         map.getContainer().appendChild(container);
  13.         return container;
  14. }
  15. SaveMapsStatus.prototype.getDefaultPosition = function() {
  16.         return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(80, 7));
  17. }
  18.  
  19. map.addControl(new SaveMapsStatus()); /* we used to add to the map, after it was created */
  20.  
  21. /* v3 */
  22. var container = document.createElement("div"); /* To change look, just add some style like container.style.border=” */
  23. container.id = ‘myId’;
  24. container.innerHTML = ‘<a href="save.php" ><img src="icon_save.gif" /></a>’; /* Custom HTML code */
  25. map.controls[google.maps.ControlPosition.TOP_LEFT].push(container);
  26.  

Prototype Compressed

I am a prototype user, but i want to save some bandwidth using a compressed version, so i start looking for it and i found a compressed version called
protopack it includes different versions, just spaces removed ( no eval required ), encrypted(eval required) and gziped version for both. i prefere the just spaces removed version since it dosen’t require use of eval.

Another good option is to use the Google AJAX Libraries API that serves a compressed version of prototype that will be cached by a year and sent with compression headers , you can include it using the full url or the Googles’s API

  1.  
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
  3.  
  4. OR
  5.  
  6. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  7. <script type="text/javascript">
  8. google.load("prototype", "1.6.0.2");
  9. </script>
  10.  
  11.  

You can find compressed versions of scriptaculous, jQuery, MooTools, dojo as well.
The bad thing is there are no https support so it wont work for secure sites.

Send a post request to a popup

Today i want to send the post request from a form to a pop up window and the solution is pretty simple first we have to create our form and then we add a target attribute where we specify the name that our popup window will have second we add a onsumbit call to the form that will popup the new window and submit the form we also have to assign and id to our form that will be usefull when calling the function that popup the windows

  1.  
  2. <form action="index.php" method="post" target="windowName" onsubmit="return postPopup();" id="postForm">
  3.  <input type="text" name="value1" />
  4.  <input type="text" name="value2" />
  5.  <!– put all the form elements here –>
  6.  <input type="submit" />
  7. </form>
  8.  

  1.  
  2. <script type="text/javascript">
  3. function postPopup( formElem ) {
  4.         // here we popup the new window, the second attribute have to be the same as the form target attribute
  5.         window.open( , ‘windowName’, ‘width=800, height=400, resizable=yes, scrollbars=yes, toolbar=no, location=no, directories=no, status=no, menubar=no’ );
  6.         // we submit the form 50 milliseconds after so the browser creates the popup
  7.         setTimeout("document.getElementById(‘postForm’).submit();",50);
  8.         // we stop the regurar form submit
  9.         return false;
  10. }
  11. </script>
  12.