Awesome GoogleMap example

map.html

<style type="text/css">
    body * {
        -webkit-text-size-adjust: none;
        box-sizing: border-box;
    }
    .map-wrapper {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
</style>
<div class="map-wrapper type-2" id="map-canvas" data-lat="-34.5294681" data-lng="-58.485075300000005" data-zoom="15" data-marker="images/map/marker3.png" data-style="1">
            
</div>
<div class="markers-wrapper addresses-block">
    <a class="marker" data-rel="map-canvas" data-lat="-34.522513" data-lng="-58.474851" data-marker="http://shulbius.com/images/map/marker3.png" data-string='
    <div class="marker-tooltip">
        <span class="sub-title">SHULBIUS Vet</span>
        <h5 class="h11">Tapiales 1265</h5>
        <img src="http://shulbius.com/images/map/marker3.png">
        <a href="#">FICHA</a>
    </div>'>
    </a>

    <a class="marker" data-rel="map-canvas" data-lat="-34.523578" data-lng="-58.474244" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS Café</span><h5 class="h11">Tapiales 1173</h5></div>'></a>

    <a class="marker" data-rel="map-canvas" data-lat="-34.537212" data-lng="-58.474548" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS Bridge</span><h5 class="h11">25 de Mayo 48</h5></div>'></a>

    <a class="marker" data-rel="map-canvas" data-lat="-34.5209198" data-lng="-58.473979499999984" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS Liby</span><h5 class="h11">Av. del Libertador 1362</h5></div>'></a>

    <a class="marker" data-rel="map-canvas" data-lat="-34.521965" data-lng="-58.474667599999975" data-marker="http://shulbius.com/images/map/marker3.png" data-string='<div class="marker-tooltip"><span class="sub-title">SHULBIUS DREI</span><h5 class="h11">Urquiza 744</h5></div>'></a>
</div>

<!-- este no va solo para ejemplo -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script type="text/javascript">
    /*============================*/
     /* 23 - GOOGLE MAPS  */
     /*============================*/
    
     var _ismobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i);

    
     var marker = [], infowindow = [], map, image = $('.map-wrapper').attr('data-marker');

     function addMarker(location,name,contentstr,imga){
        
        marker[name] = new google.maps.Marker({
            position: location,
            map: map,
            icon: imga
        });
        marker[name].setMap(map);

        infowindow[name] = new google.maps.InfoWindow({
            content:contentstr
        });
        
        google.maps.event.addListener(marker[name], 'click', function() {
            infowindow[name].open(map,marker[name]);
        });
     }
    
     function initialize() {

        var lat = $('#map-canvas').attr("data-lat");
        var lng = $('#map-canvas').attr("data-lng");
        var mapStyle = $('#map-canvas').attr("data-style");

        var myLatlng = new google.maps.LatLng(lat,lng);

        var setZoom = parseInt($('#map-canvas').attr("data-zoom"),10);

        var styles = "";

        if (mapStyle=="1"){
            styles = [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}];
        }else{
            if (mapStyle=="2"){
              styles = [{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"hue":"#f49935"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"hue":"#fad959"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.local","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#a1cdfc"},{"saturation":30},{"lightness":49}]}];   
            } 
        }
        var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
        
        var draggMap;
        if (!_ismobile) {
           draggMap = true;  
        }else{
           draggMap = false;  
        }
         
        var mapOptions = {
            zoom: setZoom,
            disableDefaultUI: false,
            scrollwheel: false,
            zoomControl: true,
            streetViewControl: true,
            center: myLatlng,
            draggable: draggMap
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
        

        $('.addresses-block a').each(function(){
            var mark_lat = $(this).attr('data-lat');
            var mark_lng = $(this).attr('data-lng');
            var mark_img = $(this).attr('data-marker');
            var this_index = $('.addresses-block a').index(this);
            var mark_name = 'template_marker_'+this_index;
            var mark_locat = new google.maps.LatLng(mark_lat, mark_lng);
            var mark_str = $(this).attr('data-string');
            addMarker(mark_locat,mark_name,mark_str,mark_img);  
        });
     }
     $(window).load(function(){
        if ($('.map-wrapper').length){  
            setTimeout(function(){initialize();}, 1000);
        }
    });
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=GMAPKEY"></script>