• Register
57,980 points
11 5 5

Want to solve programming problems and get paid for it? If that sounds interesting to you then contact us.

Today it is difficult to find websites that do not have a map that shows the location of the company or business. We are going to explain in two parts how to insert a Google Maps map on our website and how to configure it according to what we want to show.

There are several ways to insert the Google map, through an iframe, through plugins or JavaScript. We are going to use the latter mode since it will allow you to insert it into any web page and customize it to your liking.

Prior information required

The first thing we need before inserting a map is to know the coordinates of the location we want to show.

At this site coordinates-gps, we can easily obtain the latitude and longitude of the location we want.

Code to create the Google map

The code to create the Google map can be in several ways, depending on the complexity of what we want to do. In order not to fill the entry of codes, we will use the one that we consider best prepared to do all the functions.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);
var marker = new google.maps.Marker({
        position: myCenter
        ,});
window.onload = function() {
        var mapOptions = {
          center: myCenter,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          panControl: false,
          zoomControl: false,
          scaleControl: false,
          };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    marker.setMap(map);
        };
</script>
<div id="map_canvas"></div>

The first script loads the JS from the Google API. Formerly it was necessary to obtain a Google key to load it, but it is no longer necessary. The code is divided into three parts:

  • The second script configures all the map and marker options.
  • Finally, we have the HTML code (div) where the map will be displayed.

Parameters to display the map

Before starting to configure the map we must define well the div that will contain it. Using CSS we will apply the dimensions, taking care not to use "auto" as a measure, because then nothing will be shown.

myCenter: In this parameter, we insert the latitude and longitude previously obtained. It is used to centre the map and place the marker.

​var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);​

mapOptions: Here we have several parameters to configure the way the map is viewed:marker: It is the marker that will indicate the exact location within the map. At the moment we have only used the parameter position: myCenter to display it in the centre. We will include more parameters later.

  • Center: Coordinates where the map will be centered. We will insert the parameter myCenter previously defined.
  • Zoom: It is the zoom level to apply on the map. Values ​​range from 1 to 23.
  • mapTypeID: It is the type of map to display. The values ​​can be:
    • ROADMAP - Street map or road map, the default for Google Maps.
    • SATELLITE - It consists of satellite photos.
    • HYBRID - A combination of the previous two.
    • TERRAIN - Shows the physical relief, terrain elevations and streams.
  • mapTypeControl: Serves to add the map type control. Allowed values ​​are "true" and "false".
  • navigationControl: To remove the navigation controls. Allowed values ​​are "true" and "false".
  • zoomControl: To remove the zoom controls. Allowed values ​​are "true" and "false".
  • scaleControl: Disable scale control. Allowed values ​​are "true" and "false".
  • streetViewControl: Remove Street View. Allowed values ​​are "true" and "false".

With these steps, we will be able to see our Google map with the marker in the center.

In the post We will configure it to show more detailed information, change the marker icon and link it to the Google Maps page to see it larger.

[xyz-ihs snippet = "PostSubscription"] [xyz-ihs snippet = "final-post"]

 

57,980 points
11 5 5