JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script>
<div id="gm"></div>

CSS

#gm{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #FFF;
    z-index: 1;
}

JavaScript

var gmg = new google.maps.Geocoder(),
            map, center, mk ;
        gmg.geocode({
            'address': '下北沢'
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                center = results[0].geometry.location;
                initialize();
                mk = new google.maps.Marker({
                    map: map, position: results[0].geometry.location,
                    icon: {
                        url: 'http://kachibito.net/wp-content/uploads/2012/05/shimo02.png',
                        anchor: {
                            x: 50,
                            y: 130
                        }},
                        title: 'ここが下北沢駅ですぞ'
                });
            }
        });

        function initialize() {
            var options = {
                center: center,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                zoomControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER
                },
                styles: [{
                    stylers: [{
                        hue: "#2985f5"},
                    {   gamma: 1.50},
                    {   saturation: -40}]}]
            };
            map = new google.maps.Map($("#gm").get(0), options);
        }