Google Maps | Creating a simple, fully customized map
Problem:
One of the most common things we need to do as developers is to create a Google Map for our client websites. Although this is pretty straight-forward, there are many customization properties available if we considering digging into them.
Below are provided some of the most common map requirements while building Google Maps.
Solution:
*** Enabling the service ***
In order to start using the Google Maps service, we need to open our Google Console and do two things:
- Enable the Google Maps API v3 service in the "Services" tab.
- Create a new browser key in the API Access tab.
Activate the Maps V3 API
Create a browser key
Don't add any hosts for now
(later you should restrict the api key by setting *.yourdomain.com/*)
Your API Key is available now
*** Find out the location ***
The first thing we want to do is access https://maps.google.com/ and enter the location we want. Sadly enough, Google doesn't tell you the GPS coordinates in case you need them.
A very easy way to get the GPS coordinates is to do this procedure:
Update:
Use the "Latitude-Longitude Finder Tool":
http://salman-w.blogspot.se/2009/03/latitude-longitude-finder-tool.html
*** Develop a minimalist map based on the API key and Map Coordinates ***
<html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmx_LSDTJWroUB1-Fs7jg4N3NB6BQ0ZBQ&sensor=false"></script> <script type="text/javascript"> function initialize() { var gps_x = 41.372364433063794; var gps_y = -8.746404647827148; var mapOptions = { center: new google.maps.LatLng(gps_x, gps_y), zoom: 16,//set this value to how much detail you want in the view disableDefaultUI: false,//set to true to disable all map controls, scrollwheel: false//set to true to enable mouse scrolling while inside the map area }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); //set a default marker to the map position marker = new google.maps.Marker({ position: new google.maps.LatLng(gps_x, gps_y), map: map, //icon: pinImage,//to use a custom icon, uncomment this line and create the pinImage object title: "click me!" }); marker.setMap(map); //create an infowindow var infowindow = new google.maps.InfoWindow({ content: "<div style='width:330px; height:90px;'><h4>My Company</h4><div style='float:left'>My Company Info</div><div style='float:right'></div></div>" }); google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <style type="text/css"> /*height is required your you will get a blank area*/ #map-canvas{height:500px;} </style> </head> <body> <div id="map-canvas"></div> </body> </html>
*** Remove the "control types" ***
In order to hide the street/satellite view options, in V3, you will want to add this parameter to the map options object
disableDefaultUI: true,
*** Remove the zoom-with-the-mouse-scroll functionality ***
In the MapOptions array add
scrollwheel: false,
*** Add a customized pin ***
It is possible to customize the color, size and icon of the pin with the Google Chart API. We can also tweak hover colors using JavaScript events.
//https://developers.google.com/chart/infographics/docs/dynamic_icons?hl=pt-PT#pins var markerHoverColorMain = "#000000"; //regular size var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|" + markerHoverColorMain, new google.maps.Size(21, 34), new google.maps.Point(0, 0), new google.maps.Point(10, 34)); //custom size var pinImageCustomSize = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|" + markerHoverColorMain, null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(25, 40) ); marker = new google.maps.Marker({ position: new google.maps.LatLng(gps_x, gps_y), map: map, icon: pinImage,//to use default icon, simply remove this line title: "click me!" }); marker.setMap(map);
*** Add custom HTML popup dialogs (aka infowindow) ***
Update: see example above on how to create a popup window out-of-the-box using Maps API v3
//infobox var boxText = ""; boxText += ""; var myOptions = { content: boxText , disableAutoPan: false , maxWidth: 0 , pixelOffset: new google.maps.Size(-140, 0) , zIndex: null , boxStyle: { background: "url('') no-repeat"//url to box background , opacity: 1 , width: "280px" } , closeBoxMargin: "10px 2px 2px 2px" , closeBoxURL: "url_to_your_close_image" , infoBoxClearance: new google.maps.Size(1, 1) , isHidden: false , pane: "floatPane" }; marker.ibOptions = myOptions; var ib = new InfoBox(myOptions); ib.isOpen = false; marker.ib = ib; google.maps.event.addListener(marker, 'click', function () { marker.ib.open(map, marker); marker.ib.isOpen = true; });
Hello world!"; boxText += "
Your article is so convincing that I never stop myself to say something about it. You’re doing a great job. Keep it up!!!
ReplyDeletegoogle maps api integration