Customize Google Maps for your Website | Lessoncup Programming Blog

Friday, 8 April 2016

Customize Google Maps for your Website

Google Maps allow you to display maps in your websites every one know about this and we used it in website contact page  we add the dynamic maps by using embedded iframe with limited controls, now the google maps is giving the option to customization maps using Google Map API services , i just made a small tutorial to show how to customize our google map with few options, let's start

What is Google Map API

Before work on  Google Maps You must create a Google Map API KEY and write inside the head tag <script src=" API KEy&callback=initMap"></script>

Google Maps API helps you to customize the maps , and you can easily request the link of google map api

Create a Simple Google Map

to create a google map we must use the google map class and it is create the new map inside the given html element, once you create the map object you must assign the few map properties to show the map like Zoom and center

i just created the function named mapPro() inside the function i just assign the center of the map using center property and i used google.maps.Latlng() method to get the required area of map the lat is a y position of map and lng is a x position of map

give a zoom value to the map if you not assign the zoom property the map give the null result
and i used MapTypeId this property give the types of map see the bellow types if you not assign this property by default ROADMAP will display


Create a Google Marker

we can also place Google Marker at our decided location with message we have option like this method helps you to create the Marker we can also animated the Marker using with BOUNCE or DROP

to display the message on placed marker we have option like google.maps.InfoWindow() the content property help you to write content

in the final step add the function to
<script src=""></script>


function mapPro() {
  var mapProp = {
    //last is y position of map and lng is x position
 center:new google.maps.LatLng({lat: 23.100, lng: 80.000}),
 //center: {lat: -34.397, lng: 150.644},
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
  var marker = new google.maps.Marker({
    position: {lat: 23.100, lng: 80.000},
    map: map
  var infowindow = new google.maps.InfoWindow({
  content:"WELCONE TO INDIA"


google.maps.event.addDomListener(window, 'load', mapPro);

Live Demo


  1. Not working i am pasting this code on running server but code not working

    1. It must work, what kind of problem you are facing

  2. as i have said, i have copied this code, then paste this code on a file on my server. When i open that file so result is 'A'

    1. Can you mail me your code i will check and let you back

  3. Hi,this is Subhendu. Excellent work Khasim bhai.

  4. I got errror!
    This is the error:
    js:34 Google Maps API error: MissingKeyMapError


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons