Marnoto

Learning Google Maps Geocoding by example

2015-06-25T11:19:00.000+01:00

The Geocoding Service is an integrated process in the Google Maps JavaScript API v3 that allows you to convert an address in their respective geographic coordinates.
The geocoder is included in the Google Maps JavaScript API v3 and so you don’t need to define any additional parameter in the API call URL. Since this service is already included in the API, there are no costs beyond the price applied to the basic API.
However you should bear in mind that the geocoding process has usage limits.

Google Geocoder Service usage limits

After loading the API you can do some requests for geocoding (less than 10) but then the service is limited to little over one request per second. Beyond these limits the API sends an alert to the user. To prevent this warning to be visible by the user and if you need to make several consecutive requests to the geocoding service, you must program the call to setTimeout geocoder with more than 750 milliseconds.

Where you can use geocoding service

With the geocoder you can add a marker on the map and center the map in a predefined area.

Imagine that you are creating a map to show the points of interest of your country. Through the geocoder you can allow the user to search by city or street, moving the map automatically to the desired area.

Similarly you can add a new marker on the map.

The user enters the desired address in a text box.
Using the geocoding service the address is converted to its geographical coordinates.
Automatically the map is centered on the desired area.
A new marker is added to the map.

The geocoding service can also be used to convert addresses in bulk. That is, you can convert various addresses in their respective geographic coordinates to include in a database. However this feature is beyond the scope of this guide.

In this guide I will explain how to move the map to a particular region and how to add a marker at the desired location by specifying an address.

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

The HTML structure needed for the application.

This example consists of a map, a text box and a button. The text box is used to get the address to search and the button starts the geocoder process.

You must first prepare the HTML, CSS and JavaScript files with basic options to include a map with Google Maps API on the web page.

HTML /index.htmlen.marnoto.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/map.js"></script>
  </head>
  <body> 
    <div id="map-canvas"></div>
  </body>
</html>

CSS /style.cssen.marnoto.com

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
   margin: 0;
   padding: 0;
   height: 400px;
   max-width: none;
}
#map-canvas img {
   max-width: none !important;
}

JS /map.jsen.marnoto.com

var map;
var marker;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(40.680898,-8.684059),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

Then include the text box that will receive the address and a button.

HTML /index.htmlen.marnoto.com

...
  <body>
    <div>
       Indique um endereço <input type="text" id="address-input">
       <button onclick="searchAddress();">Pesquisar</button>
    </div>   
    <div id="map-canvas"></div>
  </body>
</html>

Assuming you already have all the HTML elements prepared, let's proceed to the most important phase.

Starting Geocoder process

The Google Maps Geocoding Service runs with a call to google.maps.Geocoder() method and it isn’t necessary to include any call on the API url. The Geocoder method is already included in the basic API.

In this example I'll set the geocoding service in a specific function outside the function usually called initialize(). I will designate this function as searchAddress() but you can assign any other name.

JS /map.jsen.marnoto.com

function searchAddress() {

}

Within the searchAddress() function you start to create a new variable that will get the text box value in which is indicated the address to convert.

JS /map.jsen.marnoto.com

function searchAddress() {

  var addressInput = document.getElementById('address-input').value;

}

Then another variable is defined with the name geocoder to start a new instance of google.maps.Geocoder() method.

JS /map.jsen.marnoto.com

function searchAddress() {

  var addressInput = document.getElementById('address-input').value;

  var geocoder = new google.maps.Geocoder();
}

The Geocoder() has a method known as geocode(). This is method that you will use to make the request for geocoding.

This method accepts two parameters. In the first parameter, called GeocodeRequest, you're going to define an object with the property address: whose value is equal to the value of the text box address-input stored in addressInput variable. {address: addressInput}

In the second parameter you set a callback function that will process the results. function(results, status) {

JS /map.jsen.marnoto.com

function searchAddress() {

  var addressInput = document.getElementById('address-input').value;

  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({address: addressInput}, function(results, status) {

  }
}

The GeocodeRequest object (first parameter) also accepts the property {location: LatLng}. When you use the property "location" you will be indicating to the Geocoding Service that you want to get an address through LatLng coordinates. This process is known as Reverse Geocoding.

In this example you are sending the property address and that's how the Google Maps geocoding service know what procedure to take. Which in this case is to convert an address in latitude and longitude coordinates.

geocoder.geocode({address: addressInput}, ...

The callback function defined in the second parameter also accepts two parameters. The first parameter results receives the result or results may be more than one. With the second parameter status is performed the check of the success of the geocoding service.

If the geocoder was successful, then you can move on to the processing of information received through the parameter results. If the geocoder was not successful, then procedes to check their causes. By the response obtained in the status parameter you're going to try to solve the problem or you give a response to the user to take certain procedure.

The first action to take is to check the returned status. if (status == google.maps.GeocoderStatus.OK) {

JS /map.jsen.marnoto.com

function searchAddress() {

  var addressInput = document.getElementById('address-input').value;

  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({address: addressInput}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

    }
  }
}

If the value of the status parameter is equal to google.maps.GeocoderStatus.OK this means that the geocoding process was successful and returned one or more results. GeocoderStatus may return other values but for now you will believe that all is well and you can continue processing the information received.

Since the geocoder may return one or more results, the variable results is of type array. But believing that the geocode service hit the result that you want, then you will be working with the result of the first index results[0].

The information returned by the geocoder contains an object called GeocoderResults. One of the properties of this object is another object named geometry. One of the geometry object properties is location and its value is LatLng. So, you can set the result as follows: results[0]: { geometry: { location: LatLng } }
That is, to get LatLng coordinates just do this: results[0].geometry.location

The value received is a google.maps.LatLng object. Just enter this value directly in the process you want to use. In this case you will center the map on the location received by geocode, with map.setCenter(results[0].geometry.location) function and you give the latlng object as the only parameter.

Additionally you can reset the zoom value to reposition the map and highlight the desired area.

JS /map.jsen.marnoto.com

function searchAddress() {

  var addressInput = document.getElementById('address-input').value;

  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({address: addressInput}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      map.setCenter(results[0].geometry.location);

      map.setZoom(17);
    }
  }
}

Adding a marker with Google Maps Geocoder

Adding a marker into the map with the Google Maps Geocoding Service v3 by specifying an address is performed in the same way described above. However, it is necessary to set the function that creates the marker and additionally you can center the map on the marker position and zoom it. Following the example above:

JS /map.jsen.marnoto.com

function searchAddress() {

  var addressInput = document.getElementById('address-input').value;

  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({address: addressInput}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      var myResult = results[0].geometry.location; // reference LatLng value

      createMarker(myResult); // call the function that adds the marker

      map.setCenter(myResult);

      map.setZoom(17);

    }
  });
}

function createMarker(latlng) {

   // If the user makes another search you must clear the marker variable
   if(marker != undefined && marker != ''){
    marker.setMap(null);
    marker = '';
   }

   marker = new google.maps.Marker({
      map: map,
      position: latlng
   });

}

If the geocode was not successful

If the geocode was not successful, the function returns a warning message with the error message returned by the parameter status.

JS /map.jsen.marnoto.com

...

  if (status == google.maps.GeocoderStatus.OK) {

    var myResult = results[0].geometry.location; // reference LatLng value

    createMarker(myResult); // call the function that adds the marker

    map.setCenter(myResult);

    map.setZoom(17);

  } else { // if status value is not equal to "google.maps.GeocoderStatus.OK"

    // warning message
    alert("The Geocode was not successful for the following reason: " + status);

  }

...

The code shown in this guide is the minimum required to include the geocoding service in an application. From here you can move on to learning the possible responses of the properties status and results.

Map example.

Was this article helpful?
Do you shave any doubts or want to share some knowledge?
Use the comments box and let me know. You’re welcome!

Download the necessary files for this example

geocodingservice.zip

Quick and easy share a location on Google Maps

2015-02-08T21:49:00.000+00:00

Sometimes sharing the restaurant location for your next dinner party is a very painful task. Not all group members live in the same city and to make things worse, the restaurant owner decided to choose that corner in the X alley because it's most quiet!
This is a common situation and can be transported to other group activities. What is normal to do in this situation is to send the information by e-mail, or worse, is trying to describe the route via telephone. Both situations are potential attacks to the patience of any sane mind and can be avoided if you share a location on Google Maps.

Besides solving the problem described above, sharing a map also offers other advantages. The map can be viewed on a computer, tablet or mobile phone and can include route indications. You can also use this to link your business address, on your website, to Google Maps with a pin. This is a easy way to send your location from google maps.

How to share a location on Google Maps

Open Google Maps.
Make a search by address (e.g. Av 25 de Abril 122, Ílhavo).
Copy the URL in the address bar.
Send the link by email or post on your favorite social network.

Sharing a map with Google Maps is as simple as that. The link contains all the necessary information so that the other person can view exactly the same map.

This way of sharing a map is simple, easy and fast. If Google Maps found the site, then it will place a marker on the map and Street View is automatically framed at the desired location.

Include a marker on the map when Google Maps can't find the desired address

Open Google Maps.
Zoom to the desired location.
Click with the left mouse button at the desired location.
Click on the latitude and longitude coordinates that appear in the search box on the left side of the map. This click places a marker on the map.
Copy the link from the URL address bar or choose the option "short link", as described below, and share it.

The share link

Copying the link from the URL address bar has the advantage of being fast but there is another way to find that link.

Once you've found the desired location, click the gear wheel in the lower right corner.
Choose “Share or embed map” option.
You will see a small window with the link to share. This link is equal to that in the URL address bar, so it has no great advantage to copy the link this way. The advantage is that you can shorten the URL with “Short URL” option.
Copy the short link and share it.

This option allows you to use the same link but much shorter. Thus the link address is not so strange and allows sharing where there is a character limit.

What can you share?

A road map https://goo.gl/maps/GQdtl
A map with satellite images, like Google Earth https://goo.gl/maps/Yi862
A road map or satellite image with a marker (conforme explicado anteriormente) https://goo.gl/maps/CPFEh
A direct link to the location shown in Street View https://goo.gl/maps/97FnC
A map with predefined directions from point of origin to the destination point https://goo.gl/maps/qxdP0

Any of these options is possible to share, all the necessary information is contained in the URL link. That is, if you want to share a Street View image, just go to Street View, compose the image in the position you want and share the URL. To share directions, click directions, choose the point of origin and the destination point and share the link.

Was this article helpful?
Do you shave any doubts or want to share some knowledge?
Use the comments box and let me know. You’re welcome!

Google will delete Panoramio

2014-09-25T19:31:00.000+01:00

On the same day that Google announced Google My Maps it was also announced the end of Panoramio. After 9 years feeding the Google Maps with georeferenced images from around the world, Panoramio will be replaced by Google Maps Views.
Since the launch of Google+ that Google wants all its products orbit around its social network. Views will be the new home of all the images on Panoramio.

An unexpected announcement

This announcement was issued by googler Evan Rapoport in the help forum of Panoramio and enhanced by Google Maps vice president, immediately generating a great controversy around the decision.

One of the Panoramio users comments as follows: “... Panoramio is a site where people from all countries of the world come together and make friends through the photos and comments… Panoramio promotes International Friendship and so is very important that the service will continue at any cost…”
In general this is the feeling of users who deeply feel disappointed with this decision of Google.

Disappointment

The problem is not so much in changing to another platform but in the separation of the community. Google wants its users to transfer their images to Views, promising to transfer the view count for each image but what is left behind is the most important. Google will not transfer the user comments and the Panoramio community was built thanks to those comments. Many users have created bonds of friendship, developed their photo-shooting skills and some married thanks to Panoramio!

Feeling of indignation

The feeling is anger and the voices were heard from the three Spanish, Joaquin Cuenca Abela, Jose Conde Florido and Eduardo Manchón Aguilar, who in October 2005 founded the Panoramio.com. The three founders created a petition asking the Google not to end up with the community. “Since Google announced the end of Panoramio us, the founders of Panoramio, received hundreds of messages from users around the world who want to keep alive the Panoramio Community”. Thus begins the text of the petition that after 48 hours already has about 3,000 signatures.

False hope?

I already signed that petition, because it is very important for those who belong to this community but this may be a false hope. The Googlers have demonstrated several times that they do not listen to the demands of its users. They also have shown that they have no sensitivity to social issues, community and privacy, as example the Buzz disaster. Even more, the list of products closed by Google goes already long and the Panoramio.com is already part of it.

Until June 2015

Although Google has not determined the date for the “blackout” we can foresee that it’ll be close to June 2015. On June 4, 2014 an article was published in Geo Developers Blog to announce the end of the Weather JavaScript API and Panoramio for the next June 4, 2015.

The advantages and disadvantages

Google Maps Views is prepared for today's mobility needs, unlike the outdated structure of Panoramio, and promises to follow the same principles as its predecessor. However, the source of images that "feeds" Views and the new Google Maps is somehow dispersed. That is, all existing georeferenced photos on Google+ or Picasa in publicly shared albums that respect Google's selection criteria and whose location is marked as shared, are potential candidates to appear on Views. This means that the Panoramio user community will be dispersed in the Google social network. There will be no more a proper space for the community. There will be people scattered through various existing communities on Google+. This will end the Panoramio community identity.

Who does not want their pictures to be published on Google Maps or on Views must choose not to share the location of your photos.

It is true that everything must have an evolution. It is also true that Panoramio.com is not prepared to the trends of mobility. But it is also true that the 9 years long Panoramio community built something important to millions of people worldwide. For over seven years Google gained much popularity for Maps thanks to this community. The least that can be done now is to fight so that the stories and memories present in Panoramio will not disappear forever.

Google My Maps is back and refreshed

2014-09-24T07:30:00.000+01:00

My Maps allows you to create custom maps that can be shared or embedded into webpages.
This service already existed in the previous classic version of Google Maps. However, it was removed and now appears refreshed and with new features.

In March 2013 Google launches Google Maps Engine Lite, a less robust version of Google Maps Engine directed to the business sector. At that time, Google asked My Maps users to export their maps for Maps Engine Lite platform. With this communication it was expected that My Maps service would change.

After the last major change in the layout and functionality of Google Maps, which took place earlier this year, Google removed My Maps service. It seems that this move did not achieve the desired success, perhaps because many people did not know where to look for Maps Engine Lite.
Now it announced the new version of My Maps, which is no more than a new name for the Maps Engine Lite. The name My Maps is better suited to the purpose for which it is intended and people identify better with this name.

What’s new

As was usual, you can create a map to save the location of points of interest, driving routes, add photos and videos. Now, you can share maps in the same way we share Google documents, import locations from a spreadsheet or organize markers in layers.
This new version comes with the application My Maps for Android that allows viewing, correction or addition of maps.

Important notes to consider:

After the conversion of the old maps to the new version, you can no longer view the maps in the classic version.
Custom maps are available in the My Maps application for Android, but you can not view them in Google Maps application for Android or Google Earth for iOS application.

Start using My Maps

First you must log in your Google account.

New users just go to https://www.google.com/maps/d/, select the "Create a new map" and start using the My Maps.

Those who used the previous version of My Maps, and when accessing the home page for the first time, will be asked to upgrade to the new version. This is a process that takes a few seconds and you only need to choose the "Update Now".

Then a confirmation window for updating the My Maps will appear. If you are sure you want to update just choose the "Update" option.

When the process is complete you will see the message confirming the update.

From here you can view your existing maps or add new maps.

How to access custom maps

Google must have considered that Maps Engine Lite has now reached the necessary maturity and gives the My Maps the prominence it deserves.
To access the My Maps just enter the standard Google Maps, click on the search box and then on "My Maps" that appears below the search box.

Then you can view your existing maps using the link "Try a custom map" or start immediately with the creation of a new map using the "Create" button.

FAQ

The new My Maps in the free version is limited to 2500 points, lines or shapes. You can only use up to 5 layers to organize the markers and is limited to 2,500 daily views.

UPDATED (December 5, 2014)
From now on Google My Maps Pro is free. The above limits shall be as follows: 10 000 points, lines or shapes, 10 layers per map, and 25 000 daily views.

It is recommended the reading of the new My Maps FAQ and also the complete list of the limits of use on the table "compare the My Maps editions".

My Maps is excellent for planning the next holiday trip or to share meeting points with friends.
Small or medium-sized enterprises can use My Maps to indicate your location, embedding a map in your web site's contact page.
The ideas for new maps are almost endless and Google offers a gallery of examples for using the new My Maps.

Now it's time to start mapping ... and share!

The comments section is open to sharing links to your maps.

5 ways to customize Google Maps InfoWindow

2014-09-19T05:16:00.000+01:00

The default Google Maps InfoWindow can be customized with these 5 easy steps.
A custom infowindow offers a differentiated style to your maps and it can and should be adapted to the overall look of your web site.
In this article I will explain how you can create an infowindow header, repositioning of its tail, change the infowindow size and background color, give a new look to the infowindow close button, rounded corners and a fade effect.
I will not explain how to create maps, markers and infowindows. This information is available to you in the following articles:

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

Resources required

I use jQuery to make it easy to change the google maps infowindow style.
If you want you can download jQuery and use it from your own server, or you can use the Google CDN. In this example I am using jQuery v1.11.1.
In order to use jQuery you must include the jquery.js file in your js folder. The HEAD of your HTML file must be set as follows.

HTML /index.htmlen.marnoto.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
    
    <!-- use the existing file in the js folder -->
    <script type="text/javascript" src="js/jquery.js"></script></script>

    <!-- alternatively you can use the Google CDN -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></script>
    <script type="text/javascript" src="js/map.js"></script>
  </head>
  ...
  ...

The changes to the infowindow shown in this example are valid to versions 3.18, 3.19 and 3.20 of Google Maps API.
To make sure that your infowindow doesn't look weird in the future, you must force the usage of the version 3.20. To do that you have to make a little change to the URL that calls the API. You have to insert the option v=3.20.
Now your URL looks like this: "https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false".
The 3.20 version is the experimental version (since February 17, 2015). This means that the version will be available until November 2015.

You must keep track of the API updates to be sure that your infowindow doesn't look weird.

1. How to create an header to the infowindow

To highlight the title of the infowindow you can create a header with a different background color of the remaining content.
This is readily accomplished with some CSS rules.
Assuming that you have a div with id="iw-container", which brings together all of your content, and your header is a div with class="iw-title", you will attribute a blue color for the title background and a white for text.

CSS /style.cssen.marnoto.com

#iw-container  .iw-title {
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 22px;
   font-weight: 400;
   padding: 10px;
   background-color: #48b5e9;
   color: white;
   margin: 1px;
   border-radius: 2px 2px 0 0; /* In accordance with the rounding of the default infowindow corners. */
}

As you can see in the image, the background title doesn’t look very good with those margins. Here begins the change to the infowindow structure.
To remove the margins it is necessary to find the HTML element that wraps the infowindow. This element is a div with the following class ".gm-style-iw". Knowing this and using some CSS rules you can change the style of this div to remove the margins.

CSS /style.cssen.marnoto.com

.gm-style-iw {
   width: 350px !important;
   top: 0 !important;
   left: 0 !important;
   border-radius: 2px 2px 0 0;
}

Now the header and content occupy the left margin and the top but it doesn't occupy the entire infowindow. This happens because with the API update to version 3.18 a right margin is applied in the infowindow, not allowing their content to take its full width.

To remove that right margin it is necessary to remove the DIV that make up the white background and the shadow. The white background of the infowindow and its shadow are two distinct elements but both are part of the previous div to .gm-style-iw div. Knowing this and using jQuery and the event of google maps API google.maps.event.addListener(infowindow, 'domready', function(), we can change the style of this div to remove the right margin.

JavaScript /map.jsen.marnoto.com

/*
 * The google.maps.event.addListener() event waits for
 * the creation of the infowindow HTML structure 'domready'
 * and before the opening of the infowindow defined styles
 * are applied.
 */
google.maps.event.addListener(infowindow, 'domready', function() {

   // Reference to the DIV which receives the contents of the infowindow using jQuery
   var iwOuter = $('.gm-style-iw');

   /* The DIV we want to change is above the .gm-style-iw DIV.
    * So, we use jQuery and create a iwBackground variable,
    * and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
    */
   var iwBackground = iwOuter.prev();

   // Remove the background shadow DIV
   iwBackground.children(':nth-child(2)').css({'display' : 'none'});

   // Remove the white background DIV
   iwBackground.children(':nth-child(4)').css({'display' : 'none'});

});

To complete the customization of the infowindow it is necessary to apply the following CSS rules to the DIV with the class .gm-style-iw.

CSS /style.cssen.marnoto.com

.gm-style-iw {
   width: 350px !important;
   top: 0 !important;
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 0 0;
}

Now it doesn't have the right margin and the title and content occupy the entire width of the infowindow.

With this change two problems arise, the close button and the tail of the infowindow are not in place. This leads us to take this opportunity to two more ways to customize our infowindow.

2. Repositioning the infowindow

The last major change given to the infowindow, by Google Maps developers, was the framing of the infowindow with its marker. Now the infowindow appears centered over the marker.
But things do not have to be so linear and you can reposition the infowindow in relation to the marker.
This change requires two actions, repositioning the infowindow relative to its marker and reposition the tail (arrow) of the infowindow.
To move the infowindow you have to create a reference to the div that encompasses all the elements that make up the infowindow. This div is found two levels above the .gm-style-iw div.
This div is referenced as follows.

JavaScript /map.jsen.marnoto.com

// Moves the infowindow 115px to the right.
iwOuter.parent().parent().css({left: '115px'});

As shown in the previous image the tail of the infowindow does not point to its marker. It is necessary to move the tail to point to your marker.
The elements that make up the tail and its shadow are within the same div that groups the background of the infowindow.
All tail shadow elements are grouped in the first descendant of iwBackground. So, with jQuery you set iwBackground.children(':nth-child(1)'). The elements that make up the tail are the third descendant - iwBackground.children(':nth-child(3)').

JavaScript /map.jsen.marnoto.com

// Moves the shadow of the arrow 76px to the left margin 
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

// Moves the arrow 76px to the left margin 
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

Since you are working on the tail you can change the outline color to fit the contours of the infowindow and apply 1 to z-index to overlay the infowindow.

JavaScript /map.jsen.marnoto.com

// Changes the desired color for the tail outline.
// The outline of the tail is composed of two descendants of div which contains the tail.
// The .find('div').children() method refers to all the div which are direct descendants of the previous div. 
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

Now just move down the infowindow to frame with the tail.

CSS /style.cssen.marnoto.com

.gm-style-iw {
   width: 350px !important;
   top: 15px !important; // move the infowindow 15px down
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 0 0;
}

3. InfoWindow close button

The infowindow close button can take a little more highlight.
The following code repositions the button at the top right and creates an effect around the button.

JavaScript /map.jsen.marnoto.com

// Taking advantage of the already established reference to
// div .gm-style-iw with iwOuter variable.
// You must set a new variable iwCloseBtn.
// Using the .next() method of JQuery you reference the following div to .gm-style-iw.
// Is this div that groups the close button elements.
var iwCloseBtn = iwOuter.next();

// Apply the desired effect to the close button
iwCloseBtn.css({
  opacity: '1', // by default the close button has an opacity of 0.7
  right: '38px', top: '3px', // button repositioning
  border: '7px solid #48b5e9', // increasing button border and new color
  'border-radius': '13px', // circular effect
  'box-shadow': '0 0 5px #3990B9' // 3D effect to highlight the button
  });

// The API automatically applies 0.7 opacity to the button after the mouseout event.
// This function reverses this event to the desired value.
iwCloseBtn.mouseout(function(){
  $(this).css({opacity: '1'});
});

If you want you can remove the Google Maps infowindow close button applying the following CSS rule: iwCloseBtn.css({'display': 'none'});

4. Rounded corners

In previous versions of Google Maps the infowindow had much more rounded corners. It is a matter of taste and trends.
This task is very simple, just apply 10px to the CSS rule border-radius of the .gm-style-iw.

CSS /style.cssen.marnoto.com

.gm-style-iw {
   width: 350px !important;
   top: 15px !important;
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 10px 10px; // apply 10px to the bottom corners of the infowindow
}

5. "Fade" effect at the bottom of the infowindow

Finally we can apply a "fade" effect at the bottom of the infowindow. This effect suggests that there is more hidden content, calling for "scroll".
This effect is achieved by superimposing one div with gradient effect on the last line of content.

First of all you must create the DIV at the end of the HTML content of the infowindow.

HTML /index.htmlen.marnoto.com

   <div class="iw-bottom-gradient"></div>

Then you set the CSS rules for the iw-bottom-gradient class.

CSS /style.cssen.marnoto.com

   .iw-bottom-gradient {
      position: absolute;
      width: 326px;
      height: 25px;
      bottom: 10px;
      right: 16px;
      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
      background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
      background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
      background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   }

This concludes the 5 ways to customize the Google Maps InfoWindow. Each customization can be applied alone or in full.
The end result is not the "state of art" but rather an exemplification of a possible way to give new life to the InfoWindow.

An example in action

See the Pen 5 ways to customize the Google Maps infowindow by Miguel Marnoto (@Marnoto) on CodePen.

I invite you to leave a link in the comments and show your creativity with customizing infowindows.
All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.

Download the necessary files for this example

5wayscustomizeinfowindow.zip

Street View visits Brazil World Cup 2014 stadiums

2014-06-06T15:56:00.000+01:00

Brazil's World Cup is about to begin. Pity is that not everyone will have the opportunity to be present. The Google Maps Street View offers the opportunity to visit the inside of the stadiums. 360º images give an excellent perspective of the greatness of each stadium.

It is also possible to “stroll” through some of Brazil's streets, nicely decorated strictly to receive the thousands of football fans.

Who are you betting on to be the next world champion?

How to convert lat long DD to DMS coordinates

2014-04-26T18:40:00.000+01:00

The geographical coordinates used by Google Maps are designated as coordinates DD (Decimal Degrees). In other words, these coordinates are in Decimal Degrees format (e.g. Lat 40.601203, Lng -8.668173). Another representation format of geographic coordinates, quite common among GPS users, is the DMS format (Degrees, Minutes, Seconds, e.g N 40° 36' 4.3", W 8° 40' 5.4").
From DD coordinates, used to insert markers on the map, you can easily convert lat and long coordinates to DMS format. For sure this information will be very useful to your visitors.

You may also be interested in:
Geographic coordinates converter

The geographic coordinate system

It should first be noted that both systems divide the globe in 360 degrees, the difference is in the fraction of the degree. Latitude is between the value 0 at the equator to 90 degrees at the poles. Longitude is between the value 0 in the Greenwich meridian up to 180 degrees in the opposite side of the globe.
Thus you have the following values:

The latitude value greater than 0 (0 to 90) refers to the North (N) and below 0 (0 to -90) refers to the South (S).
The value of longitude 0 (0 to 180) refers East (E) and less than 0 (0 to -180) refers to the west (W).

For example, if you have the coordinates Lat 40.601203 , Lng -8.668173 this means that the point is located in north latitude and west longitude.

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

Let's begin the coordinate conversion

First checks whether a given point is North, South, East or West.

JavaScript /map.jsen.marnoto.com

function ddToDms(lat, lng) {

   var lat = lat;
   var lng = lng;
   var latResult, lngResult;

   // Make sure that you are working with numbers.
   // This is important in case you are working with values
   // from input text in HTML.
   lat = parseFloat(lat);  
   lng = parseFloat(lng);

   // Check the correspondence of the coordinates for latitude: North or South.
   if (lat >= 0) {
     latResult = 'N';
   } else {
     latResult = 'S';
   }

   // The previous example can be replaced by the following example,
   // in order to reduce the amount of code.
   latResult = (lat >= 0)? 'N' : 'S';

   // Check the correspondence of the coordinates for longitude: East or West.
   if (lng >= 0) {
     lngResult = 'E';
   } else {
     lngResult = 'W';
   }

   // The previous example can be replaced by the following example
   // in order to reduce the amount of code.
   lngResult = (lng >= 0)? 'E' : 'W';
}

Coordinates in DMS format

The DMS format uses the angle measure to determine the position of the objects in the world.
The unit of measurement of the angle is the degree and there are 360 degrees in a full circle. (Degrees symbol is º)
Each degree is divided into 60 minutes. (Minutes symbol is ') 1º = 60'
Each minute is divided into 60 seconds. (Seconds symbol is ") 1' = 60"
So in 1 degree there are 60 * 60 seconds, or 3600 seconds.

The conversion of DD coordinates to DMS

The next step is the effective conversion of the coordinates to DMS format.
First you must understand the equivalence between the two formats. This step is very important for you to understand the necessary code.
Given the following value in DD Lat 40.601203.

First of all remember that if the latitude value is positive, it means that the object is in the Northern hemisphere.
The integer equals the value of degrees in DMS format. That is, the value of 40 in DD is equivalent to the value 40º in DMS.
Therefore you have: DMS Lat N 40º.
The decimal portion of DD is multiplied by 60 and the resulting integer converts to minutes in DMS format. In other words, removing 40 to the value 40.601203 you get 0.601203. Then you multiply 0.601203 * 60 = 36.07218 so the value of minutes is 36'.
Now you have: DMS Lat 40º 36'
Now you use the resulting decimal portion of the multiplication of 0.601203 * 60 = 36.07218 and multiply by 60. In other words, removing 36 to the value 36.07218 you get 0.07218. Then you multiply 0.07218 * 60 = 4.3308. Generally the value of seconds is represented by 2 decimal places. Therefore you get the value 4.33”.
Finally you get the value: DMS Lat 40º 36' 4.33"

DD 40.601203 = DMS N 40º 36' 4.33"

Now you can jump to the JavaScript code that makes the automatic conversion to all existing markers in your project.

JavaScript /map.jsen.marnoto.com

// Function that converts DMS to DD.
// Taking as example the value -40.601203.
function getDms(val) {

   // Required variables
   var valDeg, valMin, valSec, result;

   // Here you'll convert the value received in the parameter to an absolute value.
   // Conversion of negative to positive.
   // In this step it does not matter if it's North, South, East or West,
   // such verification was performed earlier.
   val = Math.abs(val); // -40.601203 = 40.601203

   // ---- Degrees ----
   // Stores the integer of DD for the Degrees value in DMS
   valDeg = Math.floor(val); // 40.601203 = 40

   // Add the degrees value to the result by adding the degrees symbol "º".
   result = valDeg + "º"; // 40º

   // ---- Minutes ----
   // Removing the integer of the initial value you get the decimal portion.
   // Multiply the decimal portion by 60.
   // Math.floor returns an integer discarding the decimal portion.
   // ((40.601203 - 40 = 0.601203) * 60 = 36.07218) = 36
   valMin = Math.floor((val - valDeg) * 60); // 36.07218 = 36

   // Add minutes to the result, adding the symbol minutes "'".
   result += valMin + "'"; // 40º36'

   // ---- Seconds ----
   // To get the value in seconds is required:
   // 1º - removing the degree value to the initial value: 40 - 40.601203 = 0.601203;
   // 2º - convert the value minutes (36') in decimal ( valMin/60 = 0.6) so
   // you can subtract the previous value: 0.601203 - 0.6 = 0.001203;
   // 3º - now that you have the seconds value in decimal,
   // you need to convert it into seconds of degree.
   // To do so multiply this value (0.001203) by 3600, which is
   // the number of seconds in a degree.
   // You get 0.001203 * 3600 = 4.3308
   // As you are using the function Math.round(),
   // which rounds a value to the next unit,
   // you can control the number of decimal places
   // by multiplying by 1000 before Math.round
   // and subsequent division by 1000 after Math.round function.
   // You get 4.3308 * 1000 = 4330.8 -> Math.round = 4331 -> 4331 / 1000 = 4.331
   // In this case the final value will have three decimal places.
   // If you only want two decimal places
   // just replace the value 1000 by 100.
   valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000; // 40.601203 = 4.331 

   // Add the seconds value to the result,
   // adding the seconds symbol " " ".
   result += valSec + '"'; // 40º36'4.331"

   // Returns the resulting string.
   return result;
 }

The final code

With a small change in the code of ddTomDms () function you can automatically convert the DD coordinates to DMS.
The following code shows how to use both functions together. The comments only show the necessary changes.

JavaScript /map.jsen.marnoto.com

// This function returns the coordinate
// conversion string in DD to DMS.
function ddToDms(lat, lng) {

   var lat = lat;
   var lng = lng;
   var latResult, lngResult, dmsResult;

   lat = parseFloat(lat);  
   lng = parseFloat(lng);

   latResult = (lat >= 0)? 'N' : 'S';

   // Call to getDms(lat) function for the coordinates of Latitude in DMS.
   // The result is stored in latResult variable.
   latResult += getDms(lat);

   lngResult = (lng >= 0)? 'E' : 'W';

   // Call to getDms(lng) function for the coordinates of Longitude in DMS.
   // The result is stored in lngResult variable.
   lngResult += getDms(lng);

   // Joining both variables and separate them with a space.
   dmsResult = latResult + ' ' + lngResult;

   // Return the resultant string
   return dmsResult;
}

function getDms(val) {

  var valDeg, valMin, valSec, result;

  val = Math.abs(val);

  valDeg = Math.floor(val);
  result = valDeg + "º";

  valMin = Math.floor((val - valDeg) * 60);
  result += valMin + "'";

  valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
  result += valSec + '"';

  return result;
}

The complete code is available on the link below. In this code a call is made to ddToDms() function as follows:

JavaScript /map.jsen.marnoto.com

var dmsCoords = ddToDms(latlng.lat(), latlng.lng());

The dmsCoords variable is included in the construction of the Info Window. Or may be included in any other place, not forgetting the ordering of the parameters, first latitude and then longitude -> ddToDms(lat, lng).

View map example The 2014 World Cup stadiums in Brazil

This example shows the location of the stadiums where Brazil 2014 Soccer World Cup games will take place. With a click on the markers an Info Window opens with the name and location of the stadium, a link to the respective web page at FIFA’s website and finally GPS coordinates in DMS format.

If you need more information about creating maps with multiple markers, you can find it at the following article:

Map with multiple markers - Google Maps API JavaScript v3

As usual, all doubts and comments are welcome.
Please use the comments section so that all can share on the information.

Download the necessary files for this example

converting_coordinates.zip

How to get coordinates in new Google Maps

2013-12-18T13:16:00.000+00:00

The new Google Maps is much more aesthetically appealing to our eyes but many features were left behind. Gradually Google is implementing some of the most useful tools that were available in the earlier version. With the previous version it was easy to find out the coordinates of a location in decimal degrees format (DDD: 40.604036, -8.665247) but this option has not yet been implemented in the new Google Maps.

You may also be interested in:
Geographic coordinates converter

At the time of writing the only way to find out these coordinates is through the URL.
With a click on the map a box in the upper left corner appears showing the GPS coordinates. With a click on these coordinates the URL of the page is changed and the DDD coordinates can be found at the end of the URL.
The following example shows the full address of a location after clicking on its GPS coordinates.

https://www.google.com/maps/preview#!q=40%C2%B0+38.396'%2C+-8%C2%B0+36.570'&data=!4m14!2m13!1m12!3m8!1m3!1d10723!2d-8.6007929!3d40.6367078!3m2!1i1366!2i680!4f13.1!4m2!3d40.6399333!4d-8.6095

With Google Maps API we can easily create our own coordinate search system in decimal degrees format.

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

Update (April 3, 2014)

In late February, the Google Maps team brought back the ability to right click on the map to get map coordinates. Thus, it is again possible to get directions to or from the place as well as view the latitude and longitude.

Implementation of a latitude and longitude finder

With Google Maps API it's very simple to implement a "find my latitude longitude" system. First, it is necessary to make use of the event that detects a click on the map and insert a marker on the map. At the same time we store the coordinates of latitude and longitude in the text boxes available at the top of the page.
The following code demonstrates how to start the map and detect a click on the map. The comments included in the code should be sufficient for you to understand the process.

JavaScript /map.jsen.marnoto.com

// required variables
var map;
var marker;

function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap'
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // This event detects a click on the map
   google.maps.event.addListener(map, "click", function(event) {

      // Get lat lng coordinates
      // This method returns the position of the click on the map
      var lat = event.latLng.lat().toFixed(6);
      var lng = event.latLng.lng().toFixed(6);

      // Call createMarker() function to create a marker on the map
      createMarker(lat, lng);

      // getCoords() function inserts lat and lng values into text boxes
      getCoords(lat, lng);

   });
}
google.maps.event.addDomListener(window, 'load', initialize);

Now let's view the code to create the marker on the map, with the addition of the event that detects drag movement of the marker for a precise placement.

JavaScript /map.jsen.marnoto.com

// Function that creates the marker
function createMarker(lat, lng) {

   // The purpose is to create a single marker, so
   // check if there is already a marker on the map.
   // With a new click on the map the previous
   // marker is removed and a new one is created.

   // If the marker variable contains a value
   if (marker) {
      // remove that marker from the map
      marker.setMap(null);
      // empty marker variable
      marker = "";
   }

   // Set marker variable with new location
   marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      draggable: true, // Set draggable option as true
      map: map
   });


   // This event detects the drag movement of the marker.
   // The event is fired when left button is released.
   google.maps.event.addListener(marker, 'dragend', function() {
      
      // Updates lat and lng position of the marker.
      marker.position = marker.getPosition();

      // Get lat and lng coordinates.
      var lat = marker.position.lat().toFixed(6);
      var lng = marker.position.lng().toFixed(6);

      // Update lat and lng values into text boxes.
      getCoords(lat, lng);

   });
}

Updating the latitude and longitude values of the text boxes can be made as follows.

JavaScript /map.jsen.marnoto.com

// This function updates text boxes values.
function getCoords(lat, lng) {

   // Reference input html element with id=”lat”.
   var coords_lat = document.getElementById('lat');

   // Update latitude text box.
   coords_lat.value = lat;

   // Reference input html element with id=”lng”.
   var coords_lng = document.getElementById('lng');

   // Update longitude text box.
   coords_lng.value = lng;
}

The usefulness of this small Google Maps coordinates detection system is limited. However, the methods may be adapted to more complex systems and enable a very interesting interaction with the API.

Download the necessary files for this example

coordinates_search.zip

As usual, all doubts and comments are welcome.
Please use the comments section below so that all can share on the information.

Creating a map with multiple markers - Google Maps API JavaScript v3

2013-12-14T19:54:00.000+00:00

Creating a map with multiple locations without using a database may be limited but it has its advantages where the number of places is reduced.
When you want to place up to 10 or 15 markers on a Google map in your website, it may be more effective to include it in a variable next to the code that creates the map.
In this article I will not go on the details of creation of maps, markers or infowindow. This information is available in the following articles:

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

Defining markers information

First it is necessary to define the position of the marker in the map and the information to be shown in the Info Window.
The information is stored in an array of objects variable called markersData like shown below:

JavaScript /map.jsen.marnoto.com

var markersData = [
  {
      lat: 40.6386333,
      lng: -8.745,
      name: "Camping Praia da Barra",
      address1:"Rua Diogo Cão, 125",
      address2: "Praia da Barra",
      postalCode: "3830-772 Gafanha da Nazaré" // don’t insert comma in the last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Camping Costa Nova",
      address1:"Quinta dos Patos, n.º 2",
      address2: "Praia da Costa Nova",
      postalCode: "3830-453 Gafanha da Encarnação" // don’t insert comma in the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Camping Gafanha da Nazaré",
      address1:"Rua dos Balneários do Complexo Desportivo",
      address2: "Gafanha da Nazaré",
      postalCode: "3830-225 Gafanha da Nazaré" // don’t insert comma in the last item of each marker
   } // don’t insert comma in last item
];

This way of storing information is not the most effective from the viewpoint of performance of the JavaScript code. However what is intended here is to show, in the clearest possible way, how to create a procedure to insert multiple markers on a map.

How to create markers

To enter the previously defined markers on the map it is necessary to create a function (displayMarkers()) that goes through each item in markersData object array and create the respective marker using the function (createMarker()).
Let's take a look at the code:

JavaScript /map.jsen.marnoto.com

// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds and zoom level according to markers position
   var bounds = new google.maps.LatLngBounds();

   // For loop that runs through the info on markersData making it possible to createMarker function to create the markers
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].postalCode;

      createMarker(latlng, name, address1, address2, postalCode);

      // Marker’s Lat. and Lng. values are added to bounds variable
      bounds.extend(latlng); 
   }

   // Finally the bounds variable is used to set the map bounds
   // with API’s fitBounds() function
   map.fitBounds(bounds);
}

The comments inserted in the code should be sufficient to understand how this function behaves. This function runs on each item in markersData variable and calls createMarker function, passing its information. Additionally the bounds variable stores the position of each marker. This variable will be used as the parameter for fitBounds() function.

Now let’s look at the function createMarker():

JavaScript /map.jsen.marnoto.com

// This function creates each marker and sets their Info Window content
function createMarker(latlng, name, address1, address2, postalCode){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name
   });

   // This event expects a click on a marker
   // When this event is fired the infowindow content is created
   // and the infowindow is opened
   google.maps.event.addListener(marker, 'click', function() {
      
      // Variable to define the HTML content to be inserted in the infowindow
      var iwContent = '<div id="iw_container">' +
      '<div class="iw_title">' + name + '</div>' +
      '<div class="iw_content">' + address1 + '<br />' +
      address2 + '<br />' +
      postalCode + '</div></div>';
      
      // including content to the infowindow
      infoWindow.setContent(iwContent);

      // opening the infowindow in the current map and at the current marker location
      infoWindow.open(map, marker);
   });
}

Markers are added to the map through the variable marker. Additionally, the Info Window content is created for each marker.

These two functions are meaningless by themselves without the function that initializes the creation of the map:

JavaScript /map.jsen.marnoto.com

function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the InfoWindow with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

View example

This example shows how to add multiple markers on a map. There is only one Info Window that will be used for all markers. This means that only one Info Window can be shown at each click on a marker.

Download the necessary files for this example

multiple_markers.zip

As usual, all doubts and comments are welcome. Please use the comments section so that all can share on the information.

Info Window on Google Maps API JavaScript v3

2013-09-26T11:01:00.002+01:00

The Info Window on Google Maps is no more than a <div>, in the form of a cartoon balloon, with the position on the map defined through the coordinates of the corresponding marker.

Being the Info Window a <div>, it can be customized using CSS and it can also contain any other HTML elements therein.
Info Window contents can be defined at the start of the map, if the map contains only one marker, or later with a call to the API using the setContent() function.

When there is more than one marker on the map, the contents of the Info Window are defined when creating the marker. The same Info Window will be used for all markers.

5 ways to customize the Google Maps InfoWindow

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

How to Create an Info Window

Creating an Info Window for a single marker is fairly simple and meets the following requirements:

Content - can be simple text or HTML

JavaScript /map.jsen.marnoto.com

var content = '<div id="iw_container">' +
      '<div class="iw_title">Maritime Museum of Ílhavo</div>' +
      '<div class="iw_content">Visit the cod aquarium at the Maritime Museum of Ílhavo.</div>' +
   '</div>';

Create the new Info Window with API’s new google.maps.InfoWindow() constructor, and simultaneously instruct the Info Window must search for its content on the variable content previously defined

JavaScript /map.jsen.marnoto.com
```
var infowindow = new google.maps.InfoWindow({
   content: content
});
```
Open the Info Window using an API function that detects a click on the corresponding marker and opens the InfoWindow.
The function google.maps.event.addListener(<marker>, <event>, <action>) is always alert waiting for a click (in this example the <event> is a click) on the marker <marker> (in this example only one marker is defined on the map), to run an action <action> The action on this example is a function that makes a call to the API (infowindow.open(<map>,<marker>) and asks the Info Window - defined with the variable infowindow - to be open ( .open() ) on the map defined on map , which coordinates must be the same as the marker, defined in marker.
If the previous procedures seemed difficult, the next example will show how it’s actually really simple to open an Info Window in the corresponding marker.

JavaScript /map.jsen.marnoto.com
```
google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
});
```

The API inserts a link ( x ) on the top right so that the user can close the Info Window. Additionally a new event can be inserted - infowindow.close() - that closes the Info Window with a click on the map.
As the following example shows, this time the API is instructed to wait for a click on the map and, when that happens, closes the Info Window.

JavaScript /map.jsen.marnoto.com

  // event to close the infoWindow with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

All together now!

JavaScript /map.jsen.marnoto.com

var ilhavo = new google.maps.LatLng(40.604036,-8.665247);
var museum = new google.maps.LatLng(40.604382,-8.665983);

function initialize() {
   var mapOptions = {
      center: ilhavo,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
   };

   var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

   // variable to define the content of Info Window
   var content = '<div id="iw_container">' +
                  '<div class="iw_title">Maritime Museum of Ílhavo</div>' +
                  '<div class="iw_content">Visit the cod aquarium at the Maritime Museum of Ílhavo.</div>' +
                  '</div>';

   // creates the new Info Window with reference to the variable infowindow and establishes the content
   var infowindow = new google.maps.InfoWindow({
      content: content
   });

   // variable to define the option of the marker
   var marker = new google.maps.Marker({
      position: museum, // variable with the coordinates Lat and Lng
      map: map,
      title:"Maritime Museum of Ílhavo"
   });

   // procedure to show the Info Window using a click on the marker
   google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker); //map and marker are the variables defined previously
   });

  // event to close the infoWindow with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

View example

This example shows how to add a simple Info Window with HTML content. The Info Window can also accommodate links, images and forms.
All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.

CURIOSITY
The Maritime Museum of Ílhavo inaugurated in 2013 is the first Cod Aquarium in the country.
Museu Marítimo de Ílhavo

Download the necessary files for this example

create_new_infowindow.zip

Add a marker with Google Maps JavaScript API v3

2013-09-24T10:12:00.000+01:00

Markers are simple icons that point the position of a particular location on a map.
We have already seen how to embed a map on a webpage. In this tutorial I will explain how to add a marker and how to use a custom icon, replacing the standard image from Google Maps.

You may be interested in Quick and simple sharing a location with Google Maps

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

To add a marker on a map we have to make use of google.maps.Marker constructor and set specific marker options.

JavaScript /map.jsen.marnoto.com

 // map center coordinates
 var barraBeach = new google.maps.LatLng(40.640416,-8.749541);

 // marker coordinates
 var lighthouseAveiro = new google.maps.LatLng(40.642851,-8.747596);

 function initialize() {
   var mapOptions = {
      center: barraBeach, // map center coordinates
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.SATELLITE
   };
   var map = new google.maps.Map(document.getElementById("map-canvas"),
 mapOptions);
   
   // marker options
   var marker = new google.maps.Marker({
      position: lighthouseAveiro, // marker coordinates
      map: map,
      title:"Lighthouse of Aveiro"
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

To add a simple marker on the map requires adding a new variable to the initialize() function, which is designated by marker.The variable marker makes a call to the google.maps.Marker constructor and sets custom properties values: position, map e title.

position - values of latitude and longitude of the marker. The global variable lighthouseAveiro defines latitude and longitude coordinates for this marker. Those values have to be passed through the google.maps.LatLng() constructor. This class creates a LatLng object representing a geographic point.
map - in this case the marker is added to the existing single map defined by the variable map.
title - The title of the marker is visible when the mouse cursor is placed over the marker.

Changing the image of a Google Maps marker with API v3

The previous example adds a marker on the map with the standard image from Google Maps but there is an option that allows you to use custom images.
The icon option allows you to set a URL to the intended image.

JavaScript /map.jsen.marnoto.com

 ...

 // variable that sets the URL to the new image
   var myImage = 'images/lighthouse.png';
 
 // variável que define as opções do marcador
   var marker = new google.maps.Marker({
      position: lighthouseAveiro,
      map: map,
      title:"Lighthouse of Aveiro",
      icon: myImage // set new image
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

The API automatically resizes the image to use as a marker. However it is advisable to use images with a width of 20px and height of 32px. To use the standard Google Maps icon just remove the option icon: myImage.

View example

Free icons to use in Google Maps: http://mapicons.nicolasmollet.com

CURIOSITY
The Lighthouse of Aveiro is located at Barra beach, county of Ílhavo, with 62m high, is the tallest lighthouse in Portugal and the second highest in the Iberian Peninsula.

Download the necessary files for this example

addmarker.zip

All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.

How to create a map with Google Maps API v3

2013-09-23T14:51:00.000+01:00

The Google Maps JavaScript API v3 allows you to insert a custom map in any website easily and quickly. Even for those who have few notions of JavaScript, but want to venture in programming languages, this API from Google is quite easy to learn and intuitive.

We begin this tutorial with a brief basic notion of what is necessary to insert a map in a website:

link for the Google Maps API to be insert into the <head> section of the page
the placeholder in the website page to show the map
CSS declarations to define the size of the reserved space for the map
JavaScript file to set map options

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

Link to Google Maps API

The link to the Google Maps API makes a call to the JavaScript file that will load all map components and should be inserted into the <head> section of the page. In this case a parameter is sent - &sensor=false - indicating that this map will not make use of location sensors. This parameter is required and accepts the values false or true.

HTML /index.htmlen.marnoto.com

<!DOCTYPE html>
<html>
   <head>
      <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
   </head>
   <body>
   ...

Space to display the map

The map can be inserted into any section of the page, it’s only necessary to reserve a specific space in the HTML file. Normally we use the <div> element with an id="map-canvas".

HTML /index.htmlen.marnoto.com

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

The size of the map

The map size is defined by css rules and the height is the only required declaration. If you don't set a specific height, the <div id="map-canvas"> does not expand and the map is not displayed.

CSS /style.cssen.marnoto.com

#map-canvas {
   width: 400px;
   height: 400px;
}

The previous example defines a width of 400px, but this value is optional. The measures can also be defined in percentages. The following code shows a full screen map.

CSS /style.cssen.marnoto.com

html {
   height: 100%;
}
body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#map-canvas {
   height: 100%;
}

Customize the map

Our map options are declared in a JavaScript file as follows.

JavaScript /map.jsen.marnoto.com

function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.680898,-8.684059),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map-canvas"),
 mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

The function initialize() contains two variables mapOptions and map. The first variable defines some map options in its initialization phase. The second variable indicates the API where it should insert the map and it references the variable that contains the initial options. The options defined in this example are as follows:

center: new google.maps.LatLng(40.680898,-8.684059)
in brackets we set Latitude and Longitude coordinates to define the center of the map
zoom: 11
this option sets the desired zoom level, it ranges between 0 and 21. With a higher value we get a more detailed map. The coverage area of the map is a relation between the size of the space reserved for the map and the zoom value. A higher zoom level is equal to a smaller coverage area.
mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeID defines what type of map shown on startup. This parameter does not restrict the type of map, the user can change it later.
Map Types:

ROADMAP (usual 2D map)
SATELLITE (aerial photo images)
HYBRID (aerial photography with overlapping streets and other information)
TERRAIN (map in 3D mode with terrain information)

The variable var map = makes a call to the API and passes two parameters

document.getElementById("map-canvas") indicates the space where the map should be displayed
mapOptions sends the options defined early

Finally the function initialize() is initiated trough a listener of the API, the addDomListener. So, after the page has fully loaded, the event "load" occurs in the element window, the function initialize() is called and the map appears on the page.

View example.

Google Maps Coordinates

Coordinates specified in google.maps.LatLng() are specific coordinates of the API and can be found as follows.

Go to http://maps.google.com
Find the desired location
Click with the right button at the desired location and choose "What’s here?"
In the search box (top-left) will apear the location coordinates. These are the values that should be used

Download the necessary files for this example

How_to_create_GoogleMapsAPI.zip

All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.