Google Maps API - Example

Simple example how to put map into our website :
  1. Call google maps javascript API :
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    view raw googlemap.js hosted with ❤ by GitHub
  2. Put this javascript :
    <script type="text/javascript">
    function initialize() {
    var latlng = new google.maps.LatLng(-6.5975564, 106.7911592); //based on latitude & longitude, got from your GPS
    var mapOptions = {
    center: latlng,
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.HYBRID, // map is overlay on satellite view
    mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    position: google.maps.ControlPosition.TOP_CENTER
    }
    };
    var map = new google.maps.Map(document.getElementById('map_container'),
    mapOptions);
    //this is marker position code
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: "My Position!"
    });
    }
    </script>
    view raw mapscript.js hosted with ❤ by GitHub
  3. Type this in your body tag :
    <body onload="initialize()">
    <div id="map_container"></div>
    </body>
    view raw bodymap.html hosted with ❤ by GitHub
  4. Type this under head tag, to set css style (optional) :
    <style type="text/css">
    div#map_container{
    width:100%;
    height:350px;
    }
    </style>
    view raw divmap.css hosted with ❤ by GitHub

For complete tutorial and reference, please read Google Map Javascript API Tutorial and Google Map Javascript API Reference

May it helps,
Thanks 
Diposting oleh

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)