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="https://maps.googleapis.com/maps/api/js?key=Your 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 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

19 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
  5. There is such a great amount in this article I would never have considered all alone. Your substance gives perusers things to consider in a fascinating way. Much obliged to you for your reasonable data. read more

    ReplyDelete
  6. Nice to be visiting your blog again, it has been months for me. Well this article that i've been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. this page

    ReplyDelete
  7. https://programmingtutorialsscript.blogspot.com/

    ReplyDelete
  8. Hi! Excellent post admin Zoe is my name. I'm a social media marketing director with three years of expertise in the fields of social media marketing and SEO. I build websites and POS software, and I previously worked as a digital sales manager in a POS company, where I converted leads into sales. I also have experience with brand marketing.https://neoncavesigns.medium.com/

    ReplyDelete
  9. I wanna thanks to a great extent for providing such informative and qualitative material therefore often.
    brand development companies

    ReplyDelete
  10. buy twitch followers Most people start out in the online gaming world with free games. There are hundreds of gaming sites that offer a limited selection of free games while others offer just a game or two for free. You can find everything from Pac Man to very modern puzzle games like Sudoku, all offered online completely free. As you get comfortable playing those games, you may start to wonder about the games that are not available for free. Do you pay to play online or just stick with the games that you can access free of charge?

    ReplyDelete
  11. https://dynamichealthstaff.com/nursing-jobs-in-canada-for-indian-nurses Video gameplay generally falls into two categories: single-player gaming and MMOGs (Massive Multiplayer Online Games.) Single player gaming is the most traditional form of gaming and what most people remember during their childhood.

    ReplyDelete
  12. https://www.buyyoutubesubscribers.in/2021/12/10/1000-subscribers-on-youtube-in-a-day/ Today, the success of online business is directly associated with the effort invested into the YouTube marketing campaign. Creating an attractive and interesting video on YouTube, generating effective content and messages, actively sharing your video on other networking sites, and effectively using YouTube features such as YouTube friend adder and YouTube software will make your online marketing campaign successful! YouTube marketing campaign must be unique and suitable to your business.

    ReplyDelete
  13. https://hostinglelo.in If you own a website, taking SEO courses is definitely one of the best choices you can do. Today, more and more people rely on the internet for information, news, and even entertainment. Also, people find it easy and convenient to look for products and services online. With this, they choose to spend time to search online because it is faster and easier. So if you are a website owner, you surely want your website to appear on top of the search engines so that a lot of people will be able to find you. However, there has been a growing number of websites online. With this, the competition to get on top of search engines is pretty tough. In this connection, a lot of website owners want to know how to get the latest SEO information and strategies.

    ReplyDelete
  14. https://www.visualaidscentre.com/lasik-eye-surgery-in-delhi/ Choosing the Right Board Game, for yourself, your friends or your kids can be a tricky business. If you don't know the game well yourself, there is always the risk of buying a dud. Some games are hit and miss while others seem to be a winner with everyone.

    ReplyDelete
  15. https://onohosting.com Working in video games is a dream job for many because it gives you an opportunity to work on something that you love and to make good money doing it. Sounds great huh? Well, rest assured that you aren't the only one who thinks so. Video games jobs are hard to get. This is a very competitive market so be prepared to do your homework.

    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