Coder Social home page Coder Social logo

googl-map-javascript's Introduction

Google Map Javascript API Simple Documentation

At First Create A Function For Example

function customGoogleMap(){

}

Create Three Variables, one for Main Map, One For Get HTML Map Container Div's Id.And Other For Location which Contain Lat And Lng Value. For Example ,

 function customGoogleMap(){
      
       var map;
       var mapDiv = document.getElementById("google-mapID");
       var gLatLng = new google.maps.LatLng(24.741387,88.968138);
       
    }

Now Applying Google Maps Map method,The Method Have Two Parameters First One For Map Container Id Other Parameter Take Maps Options As Like As.......

map = new google.maps.Map(mapDiv,{

       	    center                 : gLatLng,
       	    zoom                   : 10,
       	    zoomControl            : false,
       	    streetViewControl      : false,
       	    scrollwheel            : false,
       	    draggable              : true,
       	    disableDoubleClickZoom : true
       });

center : That means Your Maps Latitude And Longitude.

zoom : Maps Zooming position, The Values Range Is 1 to 20. The Default Value Is 8.

zoomControl : maps bottom-right side showing + sigh , That Means Zoom option.There Are Two Option True or False. Default Value Is True.

streetViewControl : As Like As zoomcontrol option.Default Value Is True.

scrollwhele : True or False.If True Map Zooming When You Scroll Your Mouse Wheel.Default Value Is True.

draggable : Default Value Is True, Mouse Cursor Show as Hand and draggable the map.if false the cursor show pointer.

disableDoubleClickZoom : If You Double Click on Map The Map Is Zooming.But You Give The disableDoubleClickZoom as True, Prevent The Doubliclick zoomimg option

Get More Options From The Link [Google map javascript api options!] (https://developers.google.com/maps/documentation/javascript/reference)

Google Map Marker

what is Google map Marker ?

when we see any google map a location syamble or location indicator showing the Location. for example

![google map marker] (/images/lawn-garden.png)

it's very easy to create marker in your map.Google map have a Marker Method, We can use it to the the marker. so start now.......

marker = new google.maps.Marker();

The Marker Method Takes Some Parameters.There Are position,map,title,icon etc. For Example .....

marker = new google.maps.Marker({

       	      position : gLatLng,
       	      map      : map,
       	      title    : "Custom Google Map Title"

       });

If You Type The Code You Can See Google Maps Default Marker.You Can Change The Marker As Your Custom Image Or logo.To doing that You Should Add Another Parameter That Called icon .

icon     : "images/birds.png"

We Can Found Different Google Maps Showing Animated Marker Or Location Indicators. How We can do this ? not worry it's too easy, just adding the below line to the Market Method.

animation:google.maps.Animation.BOUNCE

There Are Two Type of animation effects drop and bounce. For Better Understing Given The Total Marker Method below.......

marker = new google.maps.Marker({

       	      position : gLatLng,
       	      map      : map,
       	      title    : "Custom Google Map Title",
       	      icon     : "images/birds.png",
       	      animation:google.maps.Animation.BOUNCE
       });

want to know more about marker ? [Go here!] (https://developers.google.com/maps/documentation/javascript/markers)

googl-map-javascript's People

Contributors

rubel-hossain avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.