google Maps Archives - Donotsad where can learn any thing work project and make money

Aug 10

Google Maps – Useful Resources

Google Maps – Useful Resources ”; Previous Next The following resources contain additional information on Google Maps. Please use them to get more in-depth knowledge on this. Useful Video Courses Google Maps SEO Course: 4 Pillars to Rank Your Page 22 Lectures 2.5 hours Zach Miller More Detail Google Maps SDK for Android with Kotlin | Masterclass 64 Lectures 7 hours Stevdza-San More Detail Web Mapping & Data VIZ by Google and Microsoft Mapping Tools 17 Lectures 50 mins Damtew Engida More Detail HTML5 Course From Basics To Advanced 55 Lectures 13 hours Programming Line More Detail Creating Interactive Online Dashboards & Story Maps using arcGIS Online 27 Lectures 2.5 hours Shoaib Shahzad Obaidi More Detail Google Go Programming for Beginners (Golang) Most Popular 41 Lectures 3.5 hours Stone River ELearning More Detail Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Discussion

Discuss Google Maps ”; Previous Next Google Maps is a free web mapping service by Google that provides various types of geographical information. Google Maps has a JavaScript API to customize the maps and display them on your webpage. This tutorial is about Google Maps API (Application Programming Interface). It explains how you can integrate Google Maps on your webpage. Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Quick Guide

Google Maps – Quick Guide ”; Previous Next Google Maps – Getting Started What are Google Maps? Google Maps is a free web mapping service by Google that provides various types of geographical information. Using Google Maps, one can. Search for places or get directions from one place to another. View and navigate through horizontal and vertical panoramic street level images of various cities around the world. Get specific information like traffic at a particular point. Google Maps provides an API using which you can customize the maps and the information displayed on them. This chapter explains how to load a simple Google Map on your web page using HTML and JavaScript. Steps to Load the Map on a Webpage Follow the steps given below to load a map on your webpage − Step 1 : Create an HTML Page Create a basic HTML page with head and body tags as shown below − <!DOCTYPE html> <html> <head> </head> <body> ………….. </body> </html> Step 2 : Load the API Load or include the Google Maps API using the script tag as shown below − <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> </head> <body> ………….. </body> </html> Step 3 : Create the Container To hold the map, we have to create a container element, generally the <div> tag (a generic container) is used for this purpose. Create a container element and define its dimensions as shown below − <div id = “sample” style = “width:900px; height:580px;”></div> Step 4 : Map Options Before initializing the map, we have to create a mapOptions object (it is created just like a literal) and set values for map initialization variables. A map has three main options, namely, centre, zoom, and maptypeid. centre − Under this property, we have to specify the location where we want to centre the map. To pass the location, we have to create a LatLng object by passing the latitude and longitudes of the required location to the constructor. zoom − Under this property, we have to specify the zoom level of the map. maptypeid− Under this property, we have to specify the type of the map we want. Following are the types of maps provided by Google − ROADMAP (normal, default 2D map) SATELLITE (photographic map) HYBRID (combination of two or more other types) TERRAIN (map with mountains, rivers, etc.) Within a function, say, loadMap(), create the mapOptions object and set the required values for center, zoom, and mapTypeId as shown below. function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.240498, 82.287598), zoom:9, mapTypeId:google.maps.MapTypeId.ROADMAP }; } Step 5 : Create a Map Object You can create a map by instantiating the JavaScript class called Map. While instantiating this class, you have to pass an HTML container to hold the map and the map options for the required map. Create a map object as shown below. var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); Step 6 : load the map Finally load the map by calling the loadMap() method or by adding DOM listener. google.maps.event.addDomListener(window, ”load”, loadMap); or <body onload = “loadMap()”> Example The following example shows how to load the roadmap of the city named Vishakhapatnam with a zoom value of 12. Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:12, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Google Maps – Types In the previous chapter, we discussed how to load a basic map. Here, we will see how to select a required map type. Types of Maps Google Maps provides four types of maps. They are − ROADMAP − This is the default type. If you haven”t chosen any of the types, this will be displayed. It shows the street view of the selected region. SATELLITE − This is the map type that shows the satellite images of the selected region. HYBRID − This map type shows the major streets on satellite images. TERRAIN − This is the map type that shows the terrain and vegetation Syntax To select one of these map types, you have to mention the respective map type id in the map options as shown below − var mapOptions = { mapTypeId:google.maps.MapTypeId.Id of the required map type }; Roadmap The following example shows how to select a map of type ROADMAP − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Satellite The following example shows how to select a map of type SATELLITE − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Hybrid The following example shows how to select a map of type HYBRID − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.Hybrid }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Terrain The following example shows how to select a map of type TERRAIN − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Google

Aug 10

Google Maps – Events

Google Maps – Events ”; Previous Next The Google Maps JavaScript program can respond to various events generated by the user. This chapter provides examples demonstrating how to perform event handling while working with Google Maps. Adding an Event Listener You can add an event listener using the method addListener(). It accepts parameters such as object name on which we want to add the listener, name of the event, and the handler event. Example The following example shows how to add an event listener to a marker object. The program raises the zoom value of the map by 5 each time we double-click on the marker. Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> var myCenter = new google.maps.LatLng(17.433053, 78.412172); function loadMap(){ var mapProp = { center: myCenter, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp); var marker = new google.maps.Marker({ position: myCenter, title:”Click to zoom” }); marker.setMap(map); //Zoom to 7 when clicked on marker google.maps.event.addListener(marker,”click”,function() { map.setZoom(9); map.setCenter(marker.getPosition()); }); } </script> </head> <body onload = “loadMap()”> <div id = “googleMap” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Opening an Info Window on Click The following code opens an info window on clicking the marker − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> var myCenter = new google.maps.LatLng(17.433053, 78.412172); function loadMap(){ var mapProp = { center:myCenter, zoom:4, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp); var marker = new google.maps.Marker({ position:myCenter, }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:”Hi” }); google.maps.event.addListener(marker, ”click”, function() { infowindow.open(map,marker); }); } </script> </head> <body onload = “loadMap()”> <div id = “googleMap” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Removing the Listener You can remove an existing listener using the method removeListener(). This method accepts the listener object, therefore we have to assign the listener to a variable and pass it to this method. Example The following code shows how to remove a listener − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> var myCenter = new google.maps.LatLng(17.433053, 78.412172); function loadMap(){ var mapProp = { center:myCenter, zoom:4, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp); var marker = new google.maps.Marker({ position:myCenter, }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:”Hi” }); var myListener = google.maps.event.addListener(marker, ”click”, function() { infowindow.open(map,marker); }); google.maps.event.removeListener(myListener); } </script> </head> <body onload = “loadMap()”> <div id = “googleMap” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Types

Google Maps – Types ”; Previous Next In the previous chapter, we discussed how to load a basic map. Here, we will see how to select a required map type. Types of Maps Google Maps provides four types of maps. They are − ROADMAP − This is the default type. If you haven”t chosen any of the types, this will be displayed. It shows the street view of the selected region. SATELLITE − This is the map type that shows the satellite images of the selected region. HYBRID − This map type shows the major streets on satellite images. TERRAIN − This is the map type that shows the terrain and vegetation Syntax To select one of these map types, you have to mention the respective map type id in the map options as shown below − var mapOptions = { mapTypeId:google.maps.MapTypeId.Id of the required map type }; Roadmap The following example shows how to select a map of type ROADMAP − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Satellite The following example shows how to select a map of type SATELLITE − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Hybrid The following example shows how to select a map of type HYBRID − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.Hybrid }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Terrain The following example shows how to select a map of type TERRAIN − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:9, mapTypeId:google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } google.maps.event.addDomListener(window, ”load”, loadMap); </script> </head> <body> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Home

Google Maps Tutorial PDF Version Quick Guide Resources Job Search Discussion Google Maps is a free web mapping service by Google that provides various types of geographical information. Google Maps has a JavaScript API to customize the maps and display them on your webpage. This tutorial is about Google Maps API (Application Programming Interface). It explains how you can integrate Google Maps on your webpage. Audience This tutorial is meant for all those readers who would like to learn about Google Maps API. After completing this tutorial, you would be able to integrate Google Maps JavaScript API on your webpage. Prerequisites Before proceeding with this tutorial, you should be familiar with JavaScript and the concepts of object-oriented programming. You should also be familiar with Google Maps from a user”s point of view. Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Info Window

Google Maps – Info Window ”; Previous Next In addition to markers, polygons, polylines, and other geometrical shapes, we can also draw an Info Window on the map. This chapter explains how to use the Info Window. Adding a Window Info Window is used to add any kind of information to the map. For instance, if you want to provide information about a location on the map, you can use an info window. Usually the info window is attached to a marker. You can attach an info window by instantiating the google.maps.InfoWindow class. It has the following properties − Content − You can pass your content in String format using this option. position − You can choose the position of the info window using this option. maxWidth − By default, the info window”s width will be stretched till the text is wrapped. By specifying maxWidth, we can restrict the size of the info window horizontally. Example The following example shows how to set the marker and specify an info window above it − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:5 } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.433053, 78.412172), map: map, draggable:true, icon:”/scripts/img/logo-footer.png” }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:”388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033″ }); infowindow.open(map,marker); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Shapes

Google Maps – Shapes ”; Previous Next In the previous chapter, we learned how to use markers in Google Maps. Along with markers, we can also add various shapes such as circles, polygons, rectangles, polylines, etc. This chapter explains how to use the shapes provided by Google Maps. Polylines Polylines, provided by Google Maps, are useful to track different paths. You can add polylines to a map by instantiating the class google.maps.Polyline. While instantiating this class, we have to specify the required values of the properties of a polyline such as StrokeColor, StokeOpacity, and strokeWeight. We can add a polyline to a map by passing its object to the method setMap(MapObject). We can delete the polyline by passing a null value to the SetMap() method. Example The following example shows a polyline highlighting the path between the cities Delhi, London, New York, and Beijing. Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap(){ var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:3, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp); var tourplan = new google.maps.Polyline({ path:[ new google.maps.LatLng(28.613939, 77.209021), new google.maps.LatLng(51.507351, -0.127758), new google.maps.LatLng(40.712784, -74.005941), new google.maps.LatLng(28.213545, 94.868713) ], strokeColor:”#0000FF”, strokeOpacity:0.6, strokeWeight:2 }); tourplan.setMap(map); //to remove plylines //tourplan.setmap(null); } </script> </head> <body onload = “loadMap()”> <div id = “googleMap” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Polygons Polygons are used to highlight a particular geographical area of a state or a country. You can create a desired polygon by instantiating the class google.maps.Polygon. While instantiating, we have to specify the desired values to the properties of Polygon such as path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc. Example The following example shows how to draw a polygon to highlight the cities Hyderabad, Nagpur, and Aurangabad. Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap(){ var mapProp = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:4, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp); var myTrip = [ new google.maps.LatLng(17.385044, 78.486671), new google.maps.LatLng(19.696888, 75.322451), new google.maps.LatLng(21.056296, 79.057803), new google.maps.LatLng(17.385044, 78.486671) ]; var flightPath = new google.maps.Polygon({ path:myTrip, strokeColor:”#0000FF”, strokeOpacity:0.8, strokeWeight:2, fillColor:”#0000FF”, fillOpacity:0.4 }); flightPath.setMap(map); } </script> </head> <body onload = “loadMap()”> <div id = “googleMap” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Rectangles We can use rectangles to highlight the geographical area of a particular region or a state using a rectangular box. We can have a rectangle on a map by instantiating the class google.maps.Rectangle. While instantiating, we have to specify the desired values to the properties of the rectangle such as path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, etc. Example The following example shows how to highlight a particular area on a map using a rectangle − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap(){ var mapProp = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:6, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp); var myrectangle = new google.maps.Rectangle({ strokeColor:”#0000FF”, strokeOpacity:0.6, strokeWeight:2, fillColor:”#0000FF”, fillOpacity:0.4, map:map, bounds:new google.maps.LatLngBounds( new google.maps.LatLng(17.342761, 78.552432), new google.maps.LatLng(16.396553, 80.727725) ) }); } </script> </head> <body onload = “loadMap()”> <div id = “googleMap” style = “width:580px; height:400px;”></div> </body> </html> This gives you the following output − Circles Just as rectangles, we can use Circles to highlight the geographical area of a particular region or a state using a circle by instantiating the class google.maps.Circle. While instantiating, we have to specify the desired values to the properties of the circle such as path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc. Example The following example shows how to highlight the area around New Delhi using a circle − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap(){ var mapProp = { center:new google.maps.LatLng(28.613939,77.209021), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp); var myCity = new google.maps.Circle({ center:new google.maps.LatLng(28.613939,77.209021), radius:150600, strokeColor:”#B40404″, strokeOpacity:0.6, strokeWeight:2, fillColor:”#B40404″, fillOpacity:0.6 }); myCity.setMap(map); } </script> </head> <body onload = “loadMap()”> <div id = “googleMap” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – UI Controls

Google Maps – UI Controls ”; Previous Next Google Maps provides a User Interface with various controls to let the user interact with the map. We can add, customize, and disable these controls. Default Controls Here is a list of the default controls provided by Google Maps − Zoom − To increase and decease the zoom level of the map, we will have a slider with + and − buttons, by default. This slider will be located at the corner of left hand side of the map. Pan − Just above the zoom slider, there will be a pan control for panning the map. Map Type − You can locate this control at the top right corner of the map. It provides map type options such as Satellite, Roadmap, and Terrain. Users can choose any of these maps. Street view − Between the pan icon and the zoom slider, we have a pegman icon. Users can drag this icon and place at a particular location to get its street view. Example Here is an example where you can observe the default UI controls provided by Google Maps − Disabling the UI Default Controls We can disable the default UI controls provided by Google Maps simply by making the disableDefaultUI value true in the map options. Example The following example shows how to disable the default UI controls provided by Google Maps. Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Enabling/Disabling All the Controls In addition to these default controls, Google Maps also provides three more controls as listed below. Scale − The Scale control displays a map scale element. This control is not enabled by default. Rotate − The Rotate control contains a small circular icon which allows you to rotate maps containing oblique imagery. This control appears by default at the top left corner of the map. (See 45° Imagery for more information.) Overview − To increase and decease the zoom level of the map, we have a slider with + and − buttons, by default. This slider is located at the left corner of the map. In the map options, we can enable and disable any of the controls provided by Google Maps as shown below − { panControl: boolean, zoomControl: boolean, mapTypeControl: boolean, scaleControl: boolean, streetViewControl: boolean, overviewMapControl: boolean } Example The following code shows how to enable all the controls − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(19.373341, 78.662109), zoom:5, panControl: true, zoomControl: true, scaleControl: true, mapTypeControl:true, streetViewControl:true, overviewMapControl:true, rotateControl:true } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It will produce the following output − Control Options We can change the appearance of Google Maps controls using its control options. For example, the zoom control can be either reduced or enlarged in size. The MapType control appearance can be varied to a horizontal bar or a drop-down menu. Given below is a list of Control options for Zoom and MapType controls. Sr.No. Control Name Control Options 1 Zoom control google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT 2 MapType control google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT Example The following example demonstrates how to use the control options − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(19.373341, 78.662109), zoom:5, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Control Positioning You can change the position of the controls by adding the following line in the control options. position:google.maps.ControlPosition.Desired_Position, Here is the list of available positions where a control can be placed on a map − TOP_CENTER TOP_LEFT TOP_RIGHT LEFT_TOP RIGHT_TOP LEFT_CENTER RIGHT_CENTER LEFT_BOTTOM RIGHT_BOTTOM BOTTOM_CENTER BOTTOM_LEFT BOTTOM_RIGHT Example The following example shows how to place the MapTypeid control at the top centre of the map and how to place the zoom control at the bottom centre of the map. Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(19.373341, 78.662109), zoom:5, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position:google.maps.ControlPosition.TOP_CENTER, mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position:google.maps.ControlPosition.BOTTOM_CENTER } } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Markers

Google Maps – Markers ”; Previous Next We can draw objects on the map and bind them to a desired latitude and longitude. These are called overlays. Google Maps provides various overlays as shown below. Markers Polylines Polygons Circle and rectangle Info window Symbols To mark a single location on the map, Google Maps provides markers. These markers use a standard symbol and these symbols can be customized. This chapter explains how to add markers, and how to customize, animate, and remove them. Adding a Simple Marker You can add a simple marker to the map at a desired location by instantiating the marker class and specifying the position to be marked using latlng, as shown below. var marker = new google.maps.Marker({ position: new google.maps.LatLng(19.373341, 78.662109), map: map, }); Example The following code sets the marker on the city Hyderabad (India). Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(19.373341, 78.662109), zoom:7 } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.088291, 78.442383), map: map, }); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Animating the Marker After adding a marker to the map, you can go further and add animations to it such as bounce and drop. The following code snippet shows how to add bounce and drop animations to a marker. //To make the marker bounce` animation:google.maps.Animation.BOUNCE //To make the marker drop animation:google.maps.Animation.Drop Example The following code sets the marker on the city Hyderabad with an added animation effect − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.377631, 78.478603), zoom:5 } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.377631, 78.478603), map: map, animation:google.maps.Animation.Drop }); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Customizing the Marker You can use your own icons instead of the default icon provided by Google Maps. Just set the icon as icon:”ICON PATH”. And you can make this icon draggable by setting draggable:true. Example The following example shows how to customize the marker to a desired icon − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.377631, 78.478603), zoom:5 } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.377631, 78.478603), map: map, draggable:true, icon:”/scripts/img/logo-footer.png” }); marker.setMap(map); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Removing the Marker You can remove an existing marker by setting up the marker to null using the marker.setMap() method. Example The following example shows how to remove the marker from a map − Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.377631, 78.478603), zoom:5 } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(17.377631, 78.478603), map: map, animation:google.maps.Animation.Drop }); marker.setMap(null); } </script> </head> <body onload = “loadMap()”> <div id = “sample” style = “width:580px; height:400px;”></div> </body> </html> It produces the following output − Print Page Previous Next Advertisements ”;