function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Michael SchellMichael Schell 

Google Map - Custom Object

Hi, I was able to create a google map on a custom object through a VF page. I was wondering if there is a way to click that map and it opens a new window taking me to google maps and that location? Similar to what is built into the Accounts already, if you click that map it opens a new tab and google maps appears. Thanks! 
Mert YALTIMert YALTI

Hi Michael;

You can pass parameters to google maps. So on you visualforce page,you maps onclick attr needs to have something like window.open('http://maps.google.com/maps?z=10&t=h&q=loc:38.417675+27.0797171,12')

on the URL;

z --> stands for the zoom level (1-20)
t --> stands for the map type (m map, k satellite, h hybrid, p terrain, e GoogleEarth)
q --> stands for  the search query, if you use it with loc prefix then google understands it is a latitude and longitude separated by a + symbol

 

Please mark the answer as Best Answer if this is the answer you are looking for.

Mert YALTIMert YALTI
Attr should be like onclick="window.open('http://maps.google.com/maps?z=10&t=m&q=loc:40.748416+-73.985664');". Previous one has problems sorry for that.
Michael SchellMichael Schell
Would you be willing to show me how to insert that into my code that i'm working with below? Sorry, i'm pretty new to all of this, I appreciate the help!


<apex:page standardController="Property__c">

<head>
 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 
  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.MAP,
    mapTypeControl: true
  }
 
  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!SUBSTITUTE(JSENCODE(Property__c.Address__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.City__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.State__c),'\n',' ')}";
  var infowindow = new google.maps.InfoWindow({
  content: "<b>{!Property__c.Address__c}</b><br>" + address + " "
  });
 
  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //center map
        map.setCenter(results[0].geometry.location);
 
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Property__c.Address__c}"
        });

        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition());
        });

      }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
  });

  function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
  }
 
});
</script>
 
<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:250px;
  //min-width:300px;
  background:transparent;
}
</style>

</head>
 
<body>
<div id="map"></div>
</body>  
</apex:page>
Mert YALTIMert YALTI

Hi Michael;

Please replace the script in your code with this;

<script type="text/javascript">

$(document).ready(function() {
 
  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.MAP,
    mapTypeControl: true
  }
 
  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!SUBSTITUTE(JSENCODE(Property__c.Address__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.City__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.State__c),'\n',' ')}";
  var infowindow = new google.maps.InfoWindow({
  content: "<b>{!Property__c.Address__c}</b><br>" + address + " "
  });
 
  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //center map
        map.setCenter(results[0].geometry.location);
 
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Property__c.Address__c}"
        });

        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition());
        });

        ////////////////////////////////MAP ON CLICK EVENT/////////////////////////////
        google.maps.event.addListener(map,'click',function() {
          var centerLoc = results[0].geometry.location;
          console.log('centerLoc==>>'+centerLoc);

          // If the format of centerLoc does not look like this 40.748416+-73.985664 
          //but look like this 40.748416 , -73.985664 please use the commended out code below 

          /*
          if(centerLoc.indexOf(',')>0){
            centerLoc = centerLoc.split(',');
            centerLoc = centerLoc[0]+'+'+centerLoc[1];
            centerLoc=centerLoc.replace(/ /g,'');
          } 
          */
          
          console.log('centerLoc2==>>'+centerLoc);
          var completeUrl = 'http://maps.google.com/maps?z=15&t=m&q=loc:'+centerLoc;
          console.log('completeUrl==>>'+completeUrl);
          window.open(completeUrl);
          });
        /////////////////////////END OF MAP ON CLICK EVENT/////////////////////////////

      }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
  });

  function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
  }
 
});
</script>


If you get any error or if this is not the solution you are looking for I can help you any time but if this answer covers your problem please mark it as best answer.

Regards;
Mert

Mert YALTIMert YALTI

I forgot to metion if you want to add marker to you center location please change completeUrl with this

var completeUrl = 'http://maps.google.com/maps?z=15&t=m&q=loc:'+centerLoc+'&||'centerLoc;
Last centerLoc is marker location. You can set different location to marker if you need.

Michael SchellMichael Schell
I appreciate the help with this. I pasted the new script and when i went back to my salesforce page, the map wasn't visible anymore. Any thoughts on why that would be? Here is my complete code again using your help, maybe i messed up what you told me to try? Thanks again

<script type="text/javascript">
 

$(document).ready(function() {

  

  var myOptions = {

    zoom: 15,

    mapTypeId: google.maps.MapTypeId.MAP,

    mapTypeControl: true

  }

  

  var map;

  var marker;

 

  var geocoder = new google.maps.Geocoder();

  var address = "{!SUBSTITUTE(JSENCODE(Property__c.Address__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.City__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.State__c),'\n',' ')}";

  var infowindow = new google.maps.InfoWindow({

  content: "<b>{!Property__c.Address__c}</b><br>" + address + " "

  });

  

  geocoder.geocode( { address: address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK && results.length) {

      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

 

        //create map

        map = new google.maps.Map(document.getElementById("map"), myOptions);

 

        //center map

        map.setCenter(results[0].geometry.location);

  

        //create marker

        marker = new google.maps.Marker({

            position: results[0].geometry.location,

            map: map,

            title: "{!Property__c.Address__c}"

        });



        //add listeners

        google.maps.event.addListener(marker, 'click', function() {

          infowindow.open(map,marker);

        });

        google.maps.event.addListener(infowindow, 'closeclick', function() {

          map.setCenter(marker.getPosition());

        });

 

        <b>////////////////////////////////MAP ON CLICK EVENT/////////////////////////////

        google.maps.event.addListener(map,'click',function() {

          var centerLoc = results[0].geometry.location;

          console.log('centerLoc==>>'+centerLoc);

 

          // If the format of centerLoc does not look like this 40.748416+-73.985664

          //but look like this 40.748416 , -73.985664 please use the commended out code below

 

          /*

          if(centerLoc.indexOf(',')>0){

            centerLoc = centerLoc.split(',');

            centerLoc = centerLoc[0]+'+'+centerLoc[1];

            centerLoc=centerLoc.replace(/ /g,'');

          }

          */

           

          console.log('centerLoc2==>>'+centerLoc);

          var completeUrl = 'http://maps.google.com/maps?z=15&t=m&q=loc:'+centerLoc;

          console.log('completeUrl==>>'+completeUrl);

          window.open(completeUrl);

          });

        /////////////////////////END OF MAP ON CLICK EVENT/////////////////////////////</b>

 

      }

 

    } else {

      $('#map').css({'height' : '15px'});

      $('#map').html("Oops! address could not be found, please make sure the address is correct.");

      resizeIframe();

    }

  });

 

  function resizeIframe() {

    var me = window.name;

    if (me) {

      var iframes = parent.document.getElementsByName(me);

      if (iframes && iframes.length == 1) {

        height = document.body.offsetHeight;

        iframes[0].style.height = height + "px";

      }

    }

  }

  

});

</script>
Michael SchellMichael Schell
Okay i got the map to pull up! I'm clicking on the map though and its not opening a new window or tab?
Shiva_SfdcShiva_Sfdc
https://developer.salesforce.com/docs/component-library/bundle/lightning:map/example
Avadhut More 07Avadhut More 07
I was able to create Google Map using VisualForce page and it looks exactly what all customer's want.
We do not require Google API is.
Let me know if anyone wants to implement the solution.
Email: sfdc.avadhut@gmail.com
Thanks,
Avadhut