• Friday , 17 August 2018

Google Map Api Javascript Tutorial

Code Canyon



in this video you can learn basic useage of google map javascript api . you can add map in your project .get latitude / longitude by clicking at any position in map . add marker in map . change marker icon remove marker .

Original source

3d Ocean

Related Posts

3 Comments

  1. Jorge Luis Ricra Alcantara
    December 12, 2017 at 13:10

    thanks for this video

  2. kyle XYZ
    December 12, 2017 at 13:10

    All is perfectly working man..can I ask of what's the code when, I only wanted a marker on my location. because I kinda want to make this as my contact section background and a marker on my location.

    and can you make a video where you can custom google map api design? I've seen some websites with there google map well designed..

    TIA!
    Godbless..:)

  3. kyle XYZ
    December 12, 2017 at 13:10

    Mine is not working..why is that..??
    Please help me..

    <!DOCTYPE html>
    <html>
    <head>
    <title>Google map</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">

    html,body{
    height: 100%;
    width: 100%;
    }

    .map-container{
    background-color: #efefef;
    border:4px solid #999;
    margin:100px auto;
    height: 400px;
    width: 60%;
    }
    #google_map{
    height: 100%;
    width: 100%;
    }

    </style>
    </head>
    <body>

    <div class="map-container">
    <div id="google_map"></div>
    </div>

    <!– JS HERE –>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyA6p871V6QE4PC62pp5hoGfp8gZ0gvv0&callback=initMap"></script>

    <script type="text/javascript">
    function initMAp() {
    var map = new google.maps.Map(document.getElementById('google_map'), {
    zoom : 8,
    center : { lat : 14.5568740, lng : 121.1114870 }
    });
    }
    </script>
    </body>
    </html>

Leave A Comment

You must be logged in to post a comment.