HTML5 and all browsers compatibility

Shims, Shivs and Polyfills

Shims and shivs are small libraries that fill gaps in a platform

  • Mainly used when API changes and cause compatibility issues
  • The older API can still be supported by a thin compatibility layer on top of the newer code

Polyfills are similar concept to shims/shivs

  • They provide fallback functionality for features still not implemented natively in the browser
  • When the user update their browser they will have the same experience, but use native implementation

Continue reading “HTML5 and all browsers compatibility”

Show google maps from address

If you have for a task to show google maps location using just the address the following script should help you.
Here is the HTML code

<html>
<body onload="initialize();">
    <div id="mapsaddress">Boulevard Mansions, Borough Road, SE1, United Kingdom</div>
    <div>
        <div id="map-canvas" style="width: 750px; height: 450px; margin: auto; padding: auto;"></div>
    </div>
</body>
</html>

For Google Maps visualization we will use -> Google Maps Javascript API v3:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCClx895bzWz1KUS4aytDTnTpi8Dv988Pg&sensor=false"></script>
<script>
  var geocoder;
  var map;
  var latlng;
  function initialize() {
    var address = document.getElementById("mapsaddress").innerHTML;
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { "address": address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var latlng = results[0].geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            center: latlng
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });     
    var mapOptions = {      zoom: 13,center: latlng   } 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);           
  }
</script>

We will use the predefined address from the div with id=”mapsaddress” and will get the coordinates needed for Google Maps API. Don’t forget to use your own google map key!

You can also check the working DEMO.