Thursday, May 23, 2013

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:

- Right-click the map and select "Center the map here"
- Open up a Developer Toolbar and enter this script
javascript:void(prompt('',gApplication.getMap().getCenter()));

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

Source: http://gps.about.com/od/gpsproductoverview/ht/google-maps-coordinates.htm


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

//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; });

No comments:

Post a Comment