Mentoring Newbies for app/web Development

Another blog update for meetup, phew… (even learning angularJS seems easier than this – Kidding…)

We (Mozilla @ Jaipur) now have some new talents (Pratish, Ayush, Netra, Ekta) who are excited and are capable to develop. Their love towards web/app development needs to be nurtured and guided. This meetup was solely to serve this purpose. Btw thanks to OSHO for arranging such an awesome place for the meetup Techonbyte (@ RAM do not worry we do not require funds it was just a favor ūüėõ )

Continue reading

Customizing Google Map according to theme

Google map is a mandatory part of almost every professional website contact us page. Google provides map api’s for embedding google map via iframes, but the map marker and infobubble provided has a monotonous design and may not suite to our theme style.

But good news is, the map layout can be completely customized according to our theme.

defaultgmapcustomizedgmap

Process:

 Instead of creating an Iframe, we have to create 3 objects.

1. map object

2. marker object (multiple objects in case of multiple markers)

3. infobubble object

Now define each object with specific set of properties to suit our theme using following links

 For map options

For Marker options

For Infowindow options

 Now we have to wrap all this in a function and call it on page load.

 Following is an illustrative example:

<style type=‚ÄĚtext/css‚ÄĚ>

.phoneytext  {

       color: #465C74;

       font-family: open_Sans, Helvetica, arial !important;

       font-size: 16px !important;

       line-height: 22px;

       padding: 5px 4px 5px 5px;

       font-weight: bold;

     }</style>

<script type=‚ÄĚtext/javascript‚ÄĚ src=‚ÄĚhttp://maps.google.com/maps/api/js?sensor=false‚ÄĚ></script>

<script type=‚ÄĚtext/javascript‚ÄĚ src=‚ÄĚhttp://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js‚Äú>

<script type=‚ÄĚtext/javascript‚ÄĚ>

     var map, infoBubble;

     function init() {

       var mapCenter = new google.maps.LatLng(19.104028,72.893407); //position in lat and longs

¬†¬†¬†¬†¬†¬†¬†map = new google.maps.Map(document.getElementById(‚Äėmap‚Äô), {

         zoom: 14,

         center: mapCenter,

         mapTypeId: google.maps.MapTypeId.ROADMAP,

         size: new google.maps.Size(1004,600) //size in pixels

       });

       var marker = new google.maps.Marker({

         map: map,

         position: new google.maps.LatLng(19.117300,72.909600),//position in lat and longs

         draggable: true

       });

//giving the latitude & longitude coordinate of the infoBubble based on current zoom level

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†var newlong = marker.getPosition().lng() + (0.00008 * Math.pow(2, (21 ‚Äď map.getZoom())));

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†var newlat = marker.getPosition().lat() ‚Äď (0.000103 * Math.pow(2, (21 ‚Äď map.getZoom())));

       infoBubble = new InfoBubble({

         map: map,

¬†¬†¬†¬†¬†¬†¬†¬†¬†content: ‚Äė<div>Some text</div><div></div>‚Äô,

         position: new google.maps.LatLng(newlat,newlong),

¬†¬†¬†¬†¬†¬†¬†¬†¬†backgroundColor: ‚Äėtransparent‚Äô,//to enable effects of phoney class

         arrowSize: 0,

         borderWidth: 1,

         disableAutoPan: true,

         hideCloseButton: true,

¬†¬†¬†¬†¬†¬†¬†¬†¬†backgroundClassName: ‚Äėphoney‚Äô//complete design for info bubble

         });

       infoBubble.open();

//code to attach info-bubble to marker on zoom event

¬†¬†¬†¬†¬†¬†¬†¬†google.maps.event.addListener(map, ‚Äúzoom_changed‚ÄĚ, function() {

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†newlong = marker.getPosition().lng() + (0.00008 * Math.pow(2, (21 ‚Äď map.getZoom())));

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†newlat = marker.getPosition().lat() ‚Äď (0.000103 * Math.pow(2, (21 ‚Äď map.getZoom())));

           infoBubble.setPosition(new google.maps.LatLng(newlat, newlong));

       });

     }

¬†¬†¬†¬†¬†google.maps.event.addDomListener(window, ‚Äėload‚Äô, init);//load map on window load event

   </script>

 

<div id=‚ÄĚmap‚ÄĚ></div>