+ Start a Discussion

In Google Map with V3 Maps API



I need to add a In Line VF page with Google's V3 Maps API. I already have a s-control with v2 api but it requires a Google Map API Key.


Can someone please provide an example of Inline VF page with Google's V3 Maps API, so that I can show Google map for a address and include this page on a detail page layout.





you can convert the same s-control to a vf page by adding the standard controller .. the u can use that page as an in inline section 


My S-controll currently uses Google Map API V2 and it requires a API key, but V3 MAP API does not require a API Key.


I am looking for an example for a VF page which use Google MAP API V3.




Can some one please provide a sample VF page with google MAP API V3


Here's a quick example. Note that this shows how to load the map asynchronously. Please check the Google Maps API V3 for further info:

<apex:page >
    <div id="map_canvas"/>
    <script type="text/javascript">
        function initialize()
            var myLatlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            var mapComp = document.getElementById("map_canvas");
            mapComp.style.width = '900px';
            mapComp.style.height = '500px';
            var map = new google.maps.Map(mapComp, myOptions);
        function loadScript()
            var script = document.createElement("script");
            script.type = "text/javascript";
        // Loads the Google Maps app asynchronously
        window.onload = loadScript;



Hope this helps.