JavaScript google map API example.

JavaScript google map API example.

How to Use Google Maps API in JavaScript?

View Answers

May 24, 2012 at 6:52 PM

Google Maps- A map is a way of representation of your route, location and many more things. As railway maps contain all railway routes, a road map shows you road, street information. In the same way google map works but in your desktop, laptop, mobile etc. It is web-based service. Google maps is a service, provided by Google.It is very powerful and user-friendly web mapping technology, which is used in different mapping field. It supplies Application Programming Interface (API) and navigational tool for street map, business location, route planner etc.

Google Maps API- Google Maps API is very useful in integrating Google Maps into websites. Google launched it in june2005. It is free service and can be used on any website by developer. Initially Google introduced JavaScript maps API.Here is one example-

<html>
<head>
<title>Google Maps API - Map Type</title>
<style type="text/css">
div#map {
    width: 100%;
    height: 1000px;
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function loadGoogleMap() {
        var latlng = new google.maps.LatLng(28.70386, 77.11423);
        var mapOptions = {
            zoom : 13,
            center : latlng,
            mapTypeId : google.maps.MapTypeId.HYBRID,
            mapTypeControlOptions : {
                style : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position : google.maps.ControlPosition.TOP_CENTER
            }
        };
        var map = new google.maps.Map(document.getElementById("map "),
                mapOptions);

        var marker = new google.maps.Marker( {
            position : latlng,
            map : map,
            title : "Roseindia Office!"
        });
}
</script>
</head>
<body onload="loadGoogleMap()">
<div id="map "></div>
</body>

</html>

Description: - This example loads the google map with defined latitude and longitude. src=http://maps.googleapis.com/maps/api/js?sensor=false this is google maps api ,including as JavaScript source. Here loadGoogleMap() is a function that is called on body load. latlng is variable and we are assigning new google.maps.LatLng(28.70386, 77.11423) that is some latitude and longitude value. It locates some specific location according to its value. Variable mapOptions holds all map type controls. MapTypeId. HYBRID holds map type HYBRID that shows a transparent layer of major streets on satellite images. Position and style is properties of mapTypeControlOptions. Marker defines the location you want to mark.









Related Tutorials/Questions & Answers:
JavaScript google map API example.
JavaScript google map API example.  How to Use Google Maps API in JavaScript?   Google Maps- A map is a way of representation of your route... map, business location, route planner etc. Google Maps API- Google Maps API
add google map javascript
add google map javascript  How can i add google map using javascript in my web page?   Search for the " Google Maps Javascript API" it will allow you to embed the Google Map into your web Page
Advertisements
about google map
about google map  how to add google map in website
about google map
about google map  how to add google map in website
ApplicationDevelopment Using Google Map
ApplicationDevelopment Using Google Map  I want application using google map please guide me how can i develop
Google Map Integration - Ajax
Google Map Integration  Hi All, I am working on a vehicle tracking system project. I have to read data from sql server database and map the vehicle position in google map. I need to use ajax as the data is updated in every
Java Map Example
Description:- The above example demonstrates you the Map interface. Since Map...Java Map Example  How we can use Map in java collection?   The Map interface maps unique keys to value means it associate value to unique
jsp maps api example - JSP-Servlet
jsp maps api example  Can u give a complete working example on usage of JSP GOOGLE MAP API
Event listener in JavaScript with example
Event listener in JavaScript with example  What is event listener in JavaScript? Can anyone please post an example of Event listener?? Thanks in Advance
javascript recursion example
javascript recursion example   javascript recursion example   <html> <script> function factorial (n) { if(n==0) return(1); return (n * factorial (n-1) ); } document.write(factorial(5)); <
Google Map get Current Location on iphone and Android phones
Google Map get Current Location on iphone and Android phones  Hi, I am writing a simple javascript to get longitude and latitude for current location by using google API , but it works in my desktop browser but it doesn't
ModuleNotFoundError: No module named 'mdx-google-map'
ModuleNotFoundError: No module named 'mdx-google-map'  Hi, My... named 'mdx-google-map' How to remove the ModuleNotFoundError: No module named 'mdx-google-map' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'odoo12-addon-base-google-map'
ModuleNotFoundError: No module named 'odoo12-addon-base-google-map'  ...: No module named 'odoo12-addon-base-google-map' How to remove the ModuleNotFoundError: No module named 'odoo12-addon-base-google-map' error
ModuleNotFoundError: No module named 'odoo12-addon-fieldservice-google-map'
ModuleNotFoundError: No module named 'odoo12-addon-fieldservice-google-map...: ModuleNotFoundError: No module named 'odoo12-addon-fieldservice-google-map' How...-google-map After the installation of odoo12-addon-fieldservice-google-map
Spring Map Example
Spring Map Example In this example you will see how bean is prepared for injecting Map collection type key and its values. MapBean.java... Download this example code
JavaScript array map
JavaScript array map      ... in understanding JavaScript array map. For this we are using a JavaScript language... and the document. write print the length of element. The Single variable map the singular
to make a google map point to user defined location
to make a google map point to user defined location  Hi, i wish to develop an google map,that takes the input from a form(city,area &Country... button, the form should be submitted and then the google map should display
Java Map iterator with example
() method to get the data in Set object form. Java Map Iterator with Example... Java Map Iterator is an interface. It keeps the data in the key and value form. It is implemented by HashMap, Tree Map. Map has no iterator method. So
adding multiples markers to google map from a mysql database
" content="text/html; charset=utf-8"/> <title>Google Map API...adding multiples markers to google map from a mysql database   hello, i am trying to add markers to my googlemaps map. the latitudes and longitudes
adding multiples markers to google map from a mysql database
-type" content="text/html; charset=utf-8"/> <title>Google Map API V3...adding multiples markers to google map from a mysql database   hello, i am trying to add markers to my googlemaps map. the latitudes and longitudes
adding multiples markers to google map from a mysql database
-type" content="text/html; charset=utf-8"/> <title>Google Map API V3...adding multiples markers to google map from a mysql database   hello, i am trying to add markers to my googlemaps map. the latitudes and longitudes
adding multiples markers to google map from a mysql database
-type" content="text/html; charset=utf-8"/> <title>Google Map API V3...adding multiples markers to google map from a mysql database   hello, i am trying to add markers to my googlemaps map. the latitudes and longitudes
Java Map Example
Java Map Example: package Collection; import java.util.HashMap; import...Map Interface adds keys to values. Every key in the Map Interface should be unique. It is part of java.util package. Each element in a map has a key
google map with jsf - Java Server Faces Questions
google map with jsf  hi, i am using jsf with googlemap.i load the script file with googlemap .its working fine.how can i load the database values(latlong) to googlemap from jsf bean values.i want to show mutiple markers
ModuleNotFoundError: No module named 'odoo12-addon-web-view-google-map'
ModuleNotFoundError: No module named 'odoo12-addon-web-view-google-map' ...: ModuleNotFoundError: No module named 'odoo12-addon-web-view-google-map' How to remove the ModuleNotFoundError: No module named 'odoo12-addon-web-view-google-map'
progress bar in google map - Development process
progress bar in google map   in my google map i want a progress bar which should run when a button is clicked and should end when all the icons are loaded on the map.  Hi Nikhil, This is simple progress bar code
Google Ajax API
Google Ajax API  Hi, What is Google Ajax API? From where I can get in our application. Thanks   Hi, Google AJAX APIs is a JavaScript... content on web pages. More details at Google Ajax API's page. Thanks
Map
Map  If I have an object implementing the Map interface in Java and I... way of going through the map either iterator or for each loop or for loop   Here is an example of HashMap. import java.util.*; public class
javascript and jquery not working in google chrome and firefox
javascript and jquery not working in google chrome and firefox  <...="text/javascript" src="http://goisearch.gov.in/content/scripts/jquery.1.8.7/jquery-1.4.4.js"></script> <script type="text/javascript" src="http
map
map  using map, i want display message based on id selected [both are strings]   i do no   Hi Friend, Try the following code...) { Map map=new HashMap(); map.put("Message1","Hello
Javascript
Javascript  How validations are done using javascript ,with example? and interview questions on javASCRIPT
Tree Map Example
Tree Map Example     ... static void main(String[] args) { System.out.println("Tree Map Example!\n"... TreeMapExample Tree Map Example! Keys of tree map: [1, 2, 3
how to display the nearest palaces for the given latitude and longitude value in google map in android
how to display the nearest palaces for the given latitude and longitude value in google map in android  i m working in android. i need to display... in google map in android.. can any one help me
Map
;Please visit the following links: HashTable Example ArrayList Example HashMAp Example
Python Spark Map function example
Python Spark Map function example - Writing word count example with Map function In this example program we are going to learn about the map() function... data. Here is example program of map() function which is used for creating word
Python Spark Map function example
Python Spark Map function example - Writing word count example with Map function In this example program we are going to learn about the map() function... with the transformed data. Here is example program of map() function which is used
how to refresh google map using ajax by fetching lat long from database
how to refresh google map using ajax by fetching lat long from database ... the route travelled by it will be displayed on the google map by fetching the lat long from db. Now, i need to refresh the map using ajax.Pls help me how to do
JavaScript array reverse example
JavaScript array reverse example       JavaScript Array class have one method reverse() which... as follows: arrayname.reverse()ADS_TO_REPLACE_1 In this example we have created an array
How to use Map in velocity
How to use Map in velocity       This Example shows you how to use map in velocity. The method...(map);   map = new HashMap();   map.put("rno
ModuleNotFoundError: No module named 'google_api'
ModuleNotFoundError: No module named 'google_api'  Hi, My Python... 'google_api' How to remove the ModuleNotFoundError: No module named 'google_api' error? Thanks   Hi, In your python environment you
ModuleNotFoundError: No module named 'google_api'
ModuleNotFoundError: No module named 'google_api'  Hi, My Python... 'google_api' How to remove the ModuleNotFoundError: No module named 'google_api' error? Thanks   Hi, In your python environment you
Java Map Iterate
Map is an Interface in the Collection Framework. Map is implemented by its two sub classes HashMap Treemap Map has no iterator method. So use the entrySet() method.It returns the data as Set Example of Java Map
JavaScript
JavaScript  clone JavaScript
Javascript Form validation Example
Javascript Form validation Example In this section we will discuss about how to validate your application form in javascript. In many applications data... am giving a simple example for form validation using Javascript. ExampleADS
javascript
javascript  javascript code to dynamically add table on button click.../javascript/javascriptexamples/javascript-add-row-dynamically.shtml http://www.roseindia.net/javascript/javascript-add-row-to-table.shtml http://www.roseindia.net
JavaScript cloneNode example
JavaScript cloneNode example   .... JavaScript cloneNode() method creates a clone copy of the given node object.... Description of code: In our example code for creating a clone of given node object
JavaScript
should use JavaScript? Thanks   Hi, JavaScript is scripting language that runs on browser. You have to embed JavaScript in HTML page. Please see JavaScript tutorial. Thanks
JavaScript
JavaScript  how to get full path of a file type in javascript
javascript
javascript  Hi deepak, how to write form validation on javascript
javascript
javascript  write a program to display implement about browsers using javascript

Ads