1

I have this code which only shows the google map. I would like to have another code that shows "EARTH" and a seperate code for "Tilt View" So I will have 3 different maps.

An example is like this... Sorry i just photoshoped it :D

Notice it has a tilt view and the other is arial view. I'm sure this has 2 visual force pages.

enter image description here

Here's my code. Thanks in advance

    <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.ROADMAP,
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.Posta_Zip_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.Posta_Zip_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);

    //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>
5
  • I found a solution: Change the "MapTypeID:" to mapTypeId: google.maps.MapTypeId.HYBRID, for it to go earth For tilt. Add – Ninja King Mar 18 '15 at 22:29
  • I found a solution: Change the "MapTypeID:" to mapTypeId: google.maps.MapTypeId.HYBRID, for it to go earth For tilt. Add "map.setTilt(45) – Ninja King Mar 18 '15 at 22:31
  • You can add an answer to your own question and mark it as such. – Daniel Ballinger Mar 19 '15 at 1:01
  • sorry im still new at this. im still having an issue on how to indent codes – Ninja King Mar 19 '15 at 16:53
  • No problem. A 4 space prefix at the start of the line or surrounding the code with ` characters will format it as code. – Daniel Ballinger Mar 19 '15 at 18:53
1

I found a solution: Change the "MapTypeID:" to mapTypeId: google.maps.MapTypeId.HYBRID, for it to go earth

For tilt. Add "map.setTilt(45)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.