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, 2015 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, 2015 at 22:31
  • You can add an answer to your own question and mark it as such. Mar 19, 2015 at 1:01
  • sorry im still new at this. im still having an issue on how to indent codes
    – Ninja King
    Mar 19, 2015 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. Mar 19, 2015 at 18:53

1 Answer 1

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)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .