JSFiddle - React, Tailwind, and code Playground

by Chan Wu

HTML

<script src="https://cdn.essoduke.org/js/tinyMap/jquery.tinyMap-3.4.5.min.js"></script>
<h3>Address</h3>
<p>後壁區新嘉里</p>

<h3>Google Map Embed</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14650.569011344263!2d120.29704008814825!3d23.364972056490668!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e85188b48362d%3A0x6bae514fccc39aa!2zNzMx5Y-w5Y2X5biC5b6M5aOB5Y2A5paw5ZiJ6YeM!5e0!3m2!1szh-TW!2stw!4v1480053937208" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

<h3>TinyMap</h3>
<div class="googlemap_container"></div>

CSS

.googlemap_container {
    border: 1px solid black;
    width: 600px;
    height: 450px;
}

JavaScript

$.fn.tinyMapConfigure({
    key: 'AIzaSyDiNVL1u8WNmwfeGfQPk5UgsuPklD-5TqA'
});

var location = '後壁區新嘉里';

$('.googlemap_container').tinyMap({
    zoom: 12,
    center: location,
    marker: [
    {
        addr: location,
        title: location
    }
    ]
});