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. "http://maps.google.com/maps?file=api&amp;v=2&amp;key=$yourKey"
  5.  
  6. <!– V3 –>
  7.  
  8. "https://maps.googleapis.com/maps/api/js?key=$youKeu&v=3&sensor=true""text/javascript"
  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 */

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. "en" xmlns:v="urn:schemas-microsoft-com:vml>
  4. <head>
  5.         <style type="">
  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 */‘map’/*zoomLevel*/ );
  3.         map.setMapType( G_NORMAL_MAP );
  4.         //map.setMapType( G_SATELLITE_MAP );
  5.         //map.setMapType( G_HYBRID_MAP );
  6. }
  7.  
  8. /* V3 */‘map’ ), mapOptions);
  9.  

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 */"http://labs.google.com/ridefinder/images/mm_20_red.png""http://labs.google.com/ridefinder/images/mm_20_shadow.png"/* v3 */‘Testing Icon’,
  3.         icon:‘icon.jpg’‘shadow.jpg’/* 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
  4.   var image = {
  5.     url: ‘images/icon.png’,
  6.     size: new google.maps.Size(20, 32),
  7.     origin: new google.maps.Point(0,0),
  8.     anchor: new google.maps.Point(0, 32)
  9.   };
  10. more info: https://developers.google.com/maps/documentation/javascript/overlays?hl=en#ComplexIcons
  11. */
  12.  
  13.  

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 */// Global array to store marker
  6. // store a reference to the marker each time you create one
  7.  
  8. // delete all the markers on the array

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

  1.  
  2. /* V2 *//* V3 */"#FF0000",strokeOpacity: 1.0,strokeWeight: 2});
  3. area.setMap(map);
  4.  
  5.  

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 */"div"‘myId’‘<a href="save.php" ><img src="icon_save.gif" /></a>’/* we used to add to the map, after it was created */
  5.  
  6. /* v3 */"div"); /* To change look, just add some style like container.style.border=” */‘myId’‘<a href="save.php" ><img src="icon_save.gif" /></a>’; /* Custom HTML code */

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. "text/javascript""http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"
  3.  
  4. OR
  5.  
  6. "text/javascript""http://www.google.com/jsapi"
  7. "text/javascript"
  8. google.load("prototype", "1.6.0.2");
  9.  
  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. "index.php""post""windowName""return postPopup();""postForm"
  3.  "text""value1"
  4.  "text""value2"
  5.  <!– put all the form elements here –>
  6.  "submit"
  7.  
  8.  

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