0412 380 190

On a recent web design project I was working on, I found that the embedded Google map (using the Google Map API v3) was not working as expected.

No matter what settings I used for the var = myMapOptions, they had no effect on the map display at all.   However, on other Google Map embeds I had done, they worked fine.

 

Example of myMapOptions that had no effect:

var myMapOptions = {
    zoom: 7,
    center: point,
    mapTypeId: google.maps.MapTypeId.ROADMAP
 };

 

It turns out that the issue lay with my use of a custom layer to define multiple marker locations.

Using a KML layer, Google has default settings where the map will zoom and center to a level to suit the KML layer in order to accommodate the boundaries of the objects defined by the KML.
In other words – the markers I had configured on the custom layer were determining the map zoom level just because of their geographic location.

The fix for this, and it was relatively simple – is to force the KML layer to ignore default settings.
This is done via the “preserveViewport” boolean option.

Adding it to your Google Map API script when you call the KML layer allows all of your previously configured map options to work.

An example of the working Google Map embed code using a KML layer is as follows (the modification to force the KML layer to ignore Google default settings is in red):

<!DOCTYPE html><html>
  <head>
    <metaname="viewport"content="initial-scale=1.0, user-scalable=no">
    <metacharset="utf-8">
    <title>KML Layers</title>
    <style>
      html, body,#map-canvas {
        height:100%;
        margin:0px;
        padding:0px
      }
    </style>
    <scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>function initialize(){
  var chicago =new google.maps.LatLng(-33.293804,151.397095);
  var mapOptions ={
    zoom:7,
    center: point,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  var ctaLayer =new google.maps.KmlLayer('https://maps.google.com.au/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=214674982352929277945.0004fb2499c860284a0da', {
    preserveViewport:true
  });
  ctaLayer.setMap(map);}

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

    </script>
  </head>
  <body>
    <divid="map-canvas" style="display:block; width:600px; height:400px;"></div>
  </body></html>

 

Screenshots of before and after the change:

map1    map2