+ Start a Discussion
uHaveOptionsuHaveOptions 

VF Page showing multiple markers in google map based on field

Hello Team,

Help on code.

Hello Team.  Hope all is well

I have a Google Maps/Earth VF Page that shows my current location per record.  And I have a field "Sub-Type" which tells me the store names. How can I code the VF page so in my map if I am the center marker and the Sub-Type says "Verizon Store" it will show other markers of the Verizon Stores around my area.

Below is my Google Earth/Map Code 
<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: 18,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: false
  }
 
  var map;
  var marker;
 
  var geocoder = new google.maps.Geocoder();
  var address = "{!Property__c.Mailing_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.Zip_Postal_Code__c}}";
 
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Property__c.Name}</b><br>{!Property__c.Mailing_Address__c}<br>{!Property__c.City__c}, {!Property__c.Zip_Postal_Code__c}"
  });
 
  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);
        map.setTilt(0)
 
        //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.Name}"
        });
 
        //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! {!Property__c.Name}'s billing 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:500px;
  background:transparent;
}
</style>
 
</head>
 
<body>
<div id="map"></div> 
</body> 
</apex:page>

 My other questions are also related to this but I can ask different questions if it is too much trouble.  Also they have to be all in a different map.  But I think if I can get a code on the main question I should be able to connect the other objects.
 - Map that will show me other properties I sold.  Properties are on a different object.
 - Map that will show me other properties that are listed for sale. Listing Object.

Thanks in advance
 
pconpcon
This type of question is something that would be better asked on a forum dealing with the Google maps API.  There is nothing about that that is specific to Visualforce (assuming you dropped in your data by hand).  I would get a reproducer that does not have the Visualforce merge fields in place and post that somewhere like Stackexchange (not the Salesfore Stackexchange) and see if someone can help you with this.  Then the migration from HTML to Visualforce should be pretty straight forward.