Next Previous

Maps API Display / Show Map

39

You can easily display Google Maps with a specific region using Google Places library.

1. Add Places API Base URL with your API Key to the index.html in between head tags.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOURAPIKEY]"></script>

Make sure to replace [YOURAPIKEY] with your actual API Key from Google Cloud Console. Otherwise, it won’t work

2. Create a div element with an id called map which is basically the canvas where the Gooogle Map is going to appear.

<div id="map" style="width:100%;height:500px"></div>
<script>
   new google.maps.Map(document.getElementById("map"), {
       zoom: 15,
       center: new google.maps.LatLng(46.288896, -79.44192),
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });
</script>

3. Instantiate Google Map Object

This takes two arguments

  1. The div where the map is going to appear
  2. Javascript object that has a few properties such as zoom, center, and mapTypeId.
property namedescription
zoomThe value is an integer and larger the number is the closer the map would be.
centerThe center of the visible area of the map on the screen is based on the provided latitude and longitude values when initializing the LatLng object.
mapTypeIdIt’s a type of Map which could be ROADMAP, SATELLITE, HYBRID, TERRAIN

Next Previous