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

Aug 10

Google Maps – Symbols

Google Maps – Symbols ”; Previous Next In addition to markers, polygons, polylines, and other geometrical shapes, we can also add predefined vector images(symbols) on a map. This chapter explains how to use the symbols provided by Google Maps. Adding a Symbol Google provides various vector-based images (symbols) that can be used on a marker or a polyline. Just like other overlays, to draw these predefined symbols on a map, we have to instantiate their respective classes. Given below is a list of predefined symbols provided by Google and their class names − Circle − google.maps.SymbolPath.CIRCLE Backward Pointing arrow (closed) − google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Forward Pointing arrow (closed) − google.maps.SymbolPath.FORWARD_CLOSED_ARROW Forward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE Backward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE These symbols have the following properties − path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity, and strokeWeight. Example The following example demonstrates how to draw predefined symbols on Google 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.433053, 78.412172), zoom:5 } var map = new google.maps.Map(document.getElementById(“sample”),mapOptions); var marker = new google.maps.Marker({ position: map.getCenter(), icon: { path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, scale: 5, strokeWeight:2, strokeColor:”#B40404″ }, draggable:true, 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 Symbol Just like markers, you can add animations such as bounce and drop to the symbols as well. Example The following example shows how to use a symbol as a marker on a map and add animation to 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: map.getCenter(), icon: { path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, scale: 5, strokeWeight:2, strokeColor:”#B40404″ }, animation:google.maps.Animation.DROP, draggable:true, map: map }); } </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 – Getting Started

Google Maps – Getting Started ”; Previous Next 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 − Print Page Previous Next Advertisements ”;

Aug 10

Google Maps – Localization

Google Maps – Localization ”; Previous Next By default, the city names and option names given on the map will be in English. If required, we can display such information in other languages as well. This process is known as localization. In this chapter, we will learn how to localize a map. Localizing a Map You can customize (localize) the language of the map by specifying the language option in the URL as shown below. <script src = “https://maps.googleapis.com/maps/api/js?language=zh-Hans”></script> Example Here is an example that shows how to localize GoogleMaps. Here you can see a roadmap of China that is localized to Chinese language. Live Demo <!DOCTYPE html> <html> <head> <script src = “https://maps.googleapis.com/maps/api/js?language=zh-Hans”></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(32.870360, 101.645508), zoom:9, mapTypeId:google.maps.MapTypeId.ROADMAP }; 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> Output It will produce the following output − Print Page Previous Next Advertisements ”;