My Google Map Switches

I did not find a clear description of the stylization of Google map controls on the web. A quick study of sites with maps based on google maps api v3 made up the impression that developers avoid customizing default controls. As it turned out, customization is a very simple process. Under the cut is my jquery implementation.


')
In the example I use jquery map ui. By the way, from Jquery UI you need only 3KB module Widget.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ru"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/tags/3.0-alpha/ui/jquery.ui.map.js"></script> 

A classic example is the upper indent.



Just find the elements with the desired attributes and assign css to them.

 $(function () { //    #map_canvas $('#map_canvas').gmap({panControl: false}); //      controlwidth=32 $('div.gmnoprint[controlwidth=32]').css({'margin-top': '20px'}); //        font-weight $('div[style*="font-weight"]').css({'margin-top': '20px'}); }); 

But not just like that, but only after the map is fully loaded.

 $(function () { $('#map_canvas').gmap({panControl: false}); var map = $('#map_canvas').gmap('get', 'map'); google.maps.event.addDomListener(map, 'tilesloaded', function(){ $('div.gmnoprint[controlwidth=32]').css({'margin-top': '20px'}); $('div[style*="font-weight"]').css({'margin-top': '20px'}); }); }); 

But this is not all, it is necessary to make sure that we move the parent element, otherwise it will not be displayed correctly.

 $('div[style*="font-weight"]').parent().parent().css({'margin-top': '20px'}); 

A more complex example is its zoom and card type switches. To begin, hide all controls.

 $(function () { $('#map_canvas').gmap({disableDefaultUI: true}); }); 

Add buttons for scaling and map type

 <img id=zoomOut src=images/out.png /><img id=zoomIn src=images/in.png /><img id=map src=map.png /><img id=sat src=sat.png /> 

It would be nice to turn off the “next” button when a double increase is reached: repeatedly multiplied continents with a minimum increase are an unattractive sight.

 $(function () { $('#map_canvas').gmap({disableDefaultUI: true}); var map = $('#map_canvas').gmap('get', 'map'); $('#zoomIn').click(function() { map.setZoom(map.getZoom()+1); if(map.getZoom()==3) $('#zoomOut').show(); }); $('#zoomOut').click(function() { map.setZoom(map.getZoom()-1); if(map.getZoom()==2) $(this).hide(); }); $('#sat').click(function() { map.setMapTypeId(google.maps.MapTypeId.SATELLITE) }); $('#map').click(function() { map.setMapTypeId(google.maps.MapTypeId.ROADMAP) }); }); 

As you can see, we did quite well.



Sources can be downloaded on Yandex Disk .

That's all. If the material seems interesting - I will continue to publish about working with maps.

PS thanks for the comment, corrected formatting