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

Google Maps API helps you to customize the maps , and you can easily request the link of google map api http://maps.googleapis.com/maps/api/js

Create a Simple Google Map

to create a google map we must use the google map class google.map.Map 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

  • ROADMAP
  • HYBRID
  • SATELLITE
  • TERRAIN

Create a Google Marker

we can also place Google Marker at our decided location with message we have option like google.map.Marker() this method helps you to create the Marker we can also animated the Marker using google.map.Animation() 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 google.map.event.addDomListener()
<script src="http://maps.googleapis.com/maps/api/js"></script>

<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},
    zoom:4,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
 draggable:false
 
  };
  
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
  
  
  var marker = new google.maps.Marker({
    position: {lat: 23.100, lng: 80.000},
 animation:google.maps.Animation.BOUNCE,
    map: map
  });
  
  var infowindow = new google.maps.InfoWindow({
  content:"WELCONE TO INDIA"
  });
  
  infowindow.open(map,marker);

}

google.maps.event.addDomListener(window, 'load', mapPro);
</script>


Live Demo

8 comments :

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

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

      Delete
  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'

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

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

    ReplyDelete
  4. I got errror!
    This is the error:
    js:34 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons