JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library@master/archive/maplabel/src/maplabel.js"></script>
<div id="map_canvas"></div>
<div class="overlay-gray-banner">
    <div class="uk-container uk-container-center">
         <h1>Contact Us</h1>

        <p class="banner-short-desc">We are happy to hear from you. Please contact us through the form below and we will get back to you as soon as we can.</p>
    </div>
</div>

CSS

#map_canvas {
    width: 100%;
    height: 400px;
}

JavaScript

var geocoder, map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(58.5452824, -92.4986259);
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(34.515233, -100.918565), // latlng,
        mapTypeControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    // codeAddress();
    var mapLabel = new MapLabel({
        text: 'Ali desidero ve girişim ortaklığına ait bir yerdir burası',
        position: new google.maps.LatLng(34.515233, -100.918565),
        map: map,
        fontSize: 8,
        strokeWeight: 3,
        align: 'center'
    });

}
var icon = {
    url: 'images/map_icon.png'
};



function codeAddress() {

    var address = "New York, NY";


    geocoder.geocode({
        'address': address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            map.setCenter(results[0].geometry.location);

            var marker = new google.maps.Marker({

                map: map,
                address: address,
                icon: icon,
                position: results[0].geometry.location
            });

        } else {

            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}


jQuery(document).ready(function () {
    initialize(); //run the map
});