Google Maps APIs

Google Maps APIs

by John Vincent

Posted on May 1, 2017

Use Google Maps API for application mapping needs.

Making Maps is easy using the Google Maps APIs.

Google API

Google API Manager

Select Project.

Create Credentials

Credentials, Create Credentials, API Key

Select the API Key

Key restriction: http referrers Accept requests from:

use ip if you wish


Use Google Maps API

HTML code

<div class="google-map">
    <div id="map"></div>

Use following JavaScript

    function initMap() {
        var nyc = {lat: 40.757, lng: -73.99};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            scrollwheel: false,
            center: nyc,
styles: [
    {"featureType": "landscape", "stylers": [{"saturation": -100}, {"lightness": 65}, {"visibility": "on"}]},
    {"featureType": "poi", "stylers": [{"saturation": -100}, {"lightness": 51}, {"visibility":"simplified"}]},
    {"featureType": "road.highway", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]},
    {"featureType": "road.arterial", "stylers": [{"saturation": -100}, {"lightness": 30}, {"visibility": "on"}]},
    {"featureType": "road.local", "stylers": [{"saturation": -100}, {"lightness": 40}, {"visibility": "on"}]},
    {"featureType": "transit", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]},
    {"featureType": "administrative.province", "stylers": [{"visibility": "off"}]},
    {"featureType": "water", "elementType": "labels", "stylers": [{"visibility": "on"}, {"lightness": -25}, {"saturation": -100}]},
    {"featureType": "water", "elementType": "geometry", "stylers": [{"hue": "#ffff00"}, {"lightness": -25}, {"saturation": -97}]}
        var marker = new google.maps.Marker({
            position: nyc,
            map: map

For production, use

<script async defer
src="<your-api-key>&callback=initMap" type="text/javascript">

For development, use

<script async defer
src="" type="text/javascript">
RSS Feeds and JekyllJekyll SASS Fonts