Replace Static Google Map with JS Maps API

by sinky

HTML

<script src="https://rawgit.com/websanova/js-url/master/url.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>
<img src="https://maps.googleapis.com/maps/api/staticmap?center=51.51275550536722,7.460320293903351&amp;zoom=9&amp;size=825x200&amp;maptype=roadmap&amp;markers=color:red%7C51.51275550536722,7.460320293903351">

CSS

.map {
    height: 300px;
}

JavaScript

$('img[src*="maps.googleapis.com/maps/api/staticmap"]').click(function () {
   var $img = $(this);
    var staticMapURL = $img.attr('src');

    var $staticMapRelaceWrapper = $('<div class="map"/>').css({
        height: $img.height(),
        //width: $img.width()
    });


    var zoom = Number(url('?zoom', staticMapURL));
    var latlng = url('?center', staticMapURL).split(',');

    if (zoom && latlng[0] && latlng[1]) {
        $img.replaceWith($staticMapRelaceWrapper);

        var map = new google.maps.Map($staticMapRelaceWrapper.get(0), {
            zoom: Number(url('?zoom', staticMapURL)),
            center: {
                lat: Number(latlng[0]),
                lng: Number(latlng[1])
            }
        });
    }

});