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 += "
Hello world!
";
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;
});
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