Putting the Google Maps Javascript Api All Together

Google maps does a lot of stuff. The api has access to boundless information, harnessing the information in the Google Maps api is key to adding crazy functionality to your app. Recently making an app using the api, i can tell you that going into the docs uninitiated into its craziness. Getting information that you need from the api could be a processes, I’am here to bridge the gap between the confusion and understanding.
Let’s start this off strong and show the google maps example of how we can embed a map on the page.
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>This can be really confusing on first look but let’s break this down. The function initMap() is called in the async defer script. This is really tripped me and my partner up when we used this code in our project. This line will call upon the google maps api and when loaded will callback the initMap function after the DOM has loaded to create a map and put it in on the page in the map div.
Well now that we can see where the function is called and why we have to wait for it to be called we can break down what happening in the function.
The variable map is having a new map object from the maps api. The map is extensive and have many properties, which you can read about here. The important thing to note here is that we create a map and center it at a longitude latitude point and set the zoom.
Now let’s get some markers on that map.
var myLatLng = {lat: -25.363, lng: 131.044};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});This is is the syntax for creating a new marker. Passing the constructor for the marker object a map with the keys position, map, and title all will give the marker properties.
position: this is set once again with an object representing the longitude and latitude position of where to place it
map: this will tell the marker where this should be place luckily we have already set the map object within a variable so we can just pass that in
title: this will give the marker a message to display when the marked is clicked
A quick little extra thing to help you along is the icon property in the object.
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'parking_lot_maps.png'
});
Changing the icon property can change the image of the marker to any image you want, it could also be to a url of a picture and still work. After passing this to the marker object it will look like this on the map.
Once again the options are endless within the api docs here.

Well thats the basics on how to initiate a map and draw markers on it. Hopefully that was helpful and now you have the confidence to be brave and get in them docs. Them docs.
