Thursday, May 23, 2013

Google Maps | Creating a simple, fully customized map


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.


*** 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 **)

Your API Key is available now

*** Find out the location ***
The first thing we want to do is access 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:

- Right-click the map and select "Center the map here"
- Open up a Developer Toolbar and enter this script

It will open a popup dialog with the coordinates, which you will be able to copy to the clipboard.


Use the "Latitude-Longitude Finder Tool":

*** Develop a minimalist map based on the API key and Map Coordinates ***


<script type="text/javascript" src=""></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"),
 //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!"
 //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 () {, marker);
  google.maps.event.addDomListener(window, 'load', initialize);

<style type="text/css">
/*height is required your you will get a blank area*/


<div id="map-canvas"></div>


*** 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.

    var markerHoverColorMain = "#000000";

    //regular size
    var pinImage = new google.maps.MarkerImage("|" + 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("|" + 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!"

*** Add custom HTML popup dialogs (aka infowindow) ***
Using a third party script called "InfoBox", we can add our own HTML to the dialogs of markers.

Update: see example above on how to create a popup window out-of-the-box using Maps API v3

    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); marker.ib.isOpen = true; });

No comments:

Post a Comment