Monetize Google Maps on your Website with AdSense Ads

you've got been the usage of Google AdSense commercials to monetize the content material of your internet site but did you know that you could also use the equal AdSense software to additionally monetize any Google Maps that are embedded on your net pages. you can embed a Google Map and AdSense advertisements might be automatically served in the map to be able to either be contextually applicable to the content of the page or centered primarily based at the area of the visitors.The Google Maps block embedded under consists of a rectangular AdSense ad unit positioned near the pinnacle-center region of the map. in which Am I is another example of a internet site that embeds Google Maps with commercials.

AdSense commercials for Embedded Google Maps

Google Maps gives you an easy choice to embed maps onto your website however the default embed code does now not allow monetization. You’ll have build the map on your own the use of the Google Maps API to allow advertising and this isn’t tough both. permit me display you in few easy step.

To get started, go to the Google AdSense internet site and create a new advert unit. you can pick out the default colour scheme for the ad unit (white heritage) and choose responsive for the scale. The latter doesn’t rely though as the ad unit will mechanically healthy inside the box map.

next, reproduction-paste the following Google Maps embed code everywhere to your internet template.

    <div id="google-maps" style="width:500px; top:500px;"></div>
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp">
     </script>
    <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
     </script>
    
    <script>
    
      feature showGoogleMaps()
    
        var mapOptions =
          middle: new google.maps.LatLng(38.8977, -seventy seven.036),
          zoom: 5
        ;
    
        var map = new google.maps.Map(
          document.getElementById('google-maps'), mapOptions);
    
        var advert = '<ins class="adsbygoogle"
                  fashion="show:inline-block;width:300px;top:100px"
                  information-ad-client="ca-pub-xxxx"
                  facts-ad-slot="yyyy"></ins>';
    
        var adNode = record.createElement('div');
        adNode.innerHTML = ad;
    
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(adNode);
    
        google.maps.occasion.addListenerOnce(map, 'tilesloaded', function()
          (adsbygoogle = window.adsbygoogle );
        );
    
     
    
      google.maps.event.addDomListener(window, 'load', showGoogleMaps);
    
    </script>

you can replace the peak and width of the Google Maps in line #1 to fit your website layout at the same time as the range and longitude of the area needs to be replaced in line #eleven. in the end, xxxx and yyyy in the embed code have to be replaced along with your AdSense writer id and the ad Slot identification respectively. you can locate those values inside the embed code generated by way of AdSense.

in case you are ready to fiddle with the JavaScript, you can even more choice to customize the embedded map.

for example, you can easily trade the placement of the AdSense ad unit inner Google Maps from TOP_CENTER (line #28) to BOTTOM_CENTER or something else. further, you could exchange the default view of the embedded map from Roadmap to satellite or Hybrid. The various controls inside the Google map – like the road view Pegman, the zoom slider, the pan control – may be easily hidden or moved to a specific role by means of putting the corresponding residences in the mapOptions item.

    <script>
    
      var mapOptions =
    
        // middle the map in this deal with
        center: new google.maps.LatLng(38.8977, -seventy seven.036),
    
        // Set the preliminary zoom level
        zoom: 14,
    
        // hide the slider to govern the zoom tiers
        zoomControl: false,
    
        // cover the controls to pan the map
        panControl: false,
    
        // show the street view peg but in a exclusive function
        streetViewControl: real,
        streetViewControlOptions:
          position: google.maps.ControlPosition.BOTTOM_CENTER
        ,
    
        // permit go to to interchange to satellite view and back
        mapTypeControl: true,
    
        // Set the default form of the map to Roadmap
        mapTypeId: google.maps.MapTypeId.ROADMAP
    
      ;
    
    </script>