Plotting a web app address inside the Google Map on detail view

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

You may have a requirement where you need to display the Google Map on the Detail View of a web app item and plot the item on it. For example, you have a web app of wineries and when the visitor clicks on the winery inside the list of wineries you want to display the Google Map on the detailed view and plot the winery on the map. Here's an example of it:

Bordeleau-Winery.jpg

The following code will do this for you in conjunction with some Business Catalyst tags which are available from the Tag Insert dropdown.

Paste this code inside the detail web app layout, before all your other code:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  
    <script>  
      var geocoder;  
      var map;  
      function initialize() {  
        geocoder = new google.maps.Geocoder();  
        var latlng = new google.maps.LatLng({{latitude}},{{longitude}}); 
        var mapOptions = {  
          zoom: 15,  
          center: latlng,  
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        }  
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  
        codeAddress('{tag_address1} {tag_addresscity} {tag_addressstate} {tag_addresscountry}');  
      }  

  
      function codeAddress(address) {  
        geocoder.geocode( { 'address': address}, function(results, status) {  
          if (status == google.maps.GeocoderStatus.OK) {  
            map.setCenter(results[0].geometry.location);  
            var marker = new google.maps.Marker({  
                map: map,  
                position: results[0].geometry.location  
            });  
          } else {  
            alert('Geocode was not successful for the following reason: ' + status);  
          }  
        });  
      }  
</script>

In the above code you can adjust the zoom level by changing "zoom:15" to an appropriate value. The zoom goes from 1 - 16. You then need to place this div inside your code, wherever you want to display your map:

<div id="map_canvas" style="height:400px;width:400px"></div> 

Here you can adjust the width and height to suit your design. Finally, you need to place the following call on the bottom of the layout, below all your other code.

<script>initialize();</script>

Now when your page loads you will see the Google Map in it.

NOTE: You must have a state and postcode/zipcode values present in order for this to work or {tag_addresslatitude} and {tag_addresslongitude} will render 0. Also, your state value needs to be an abbreviation e.g. NY or CA or NSW.

The code was taken from the follow example by Google and adjusted for BC use:

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-sim ple