KML overriding default view after loading

Question

KML overriding default view after loading

471 Views Asked by aprilian At 19 April 2025 at 06:26

I am using geoxml3 from local machine to load kml. However the default view center is changing once kml is loaded. I did try adding line "preserveViewport: true" but still I get full view of kml after loading. any suggestion to stop this.

Here is my code

<html>
  <head>
    <title>Google Map</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map {
            margin: 0;
            padding: 0;
            height: 100%;
                }
    </style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="geoxml3-master/polys/geoxml3.js"></script>
<script type="text/javascript" src="geoxml3-master/ProjectedOverlay.js"></script>

    <script>
var myCenter=new google.maps.LatLng( 13.751768, 100.537606);
var map;
var marker;
var mapProp;
function initialize()
{
    mapProp = {
        center:myCenter,
        zoom:17,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    map=new google.maps.Map(document.getElementById("map"),mapProp);


           var parser = new geoXML3.parser({
                      suppressInfoWindows: true,
                      map: map,
                      preserveViewport: true
                  });
            parser.parse('test.kml'); 

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


    </script>

    </head>

 <body>
    <div style="height:100%; width:100%;">
         <div id="map"></div>
    </div>
</body>

Original Q&A

There are 1 best solutions below

**geocodezip** · Accepted Answer

For geoxml3, the equivalent of preserveViewport is zoom. Set it to true (the default) to automatically zoom to fit the KML, set it to false to disable that functionality.

var myCenter=new google.maps.LatLng( 13.751768, 100.537606);
var map;
var marker;
var mapProp;
function initialize() {
  mapProp = {
   center:myCenter,
   zoom:17,
   mapTypeId:google.maps.MapTypeId.ROADMAP
 };

 map=new google.maps.Map(document.getElementById("map"),mapProp);
 var parser = new geoXML3.parser({
       suppressInfoWindows: true,
       map: map,
       zoom: false
     });
 parser.parse('test.kml'); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

code snippet:

var myCenter = new google.maps.LatLng(13.751768, 100.537606);
var map;
var marker;
var mapProp;

function initialize() {
  mapProp = {
    center: myCenter,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map"), mapProp);
  var parser = new geoXML3.parser({
    suppressInfoWindows: true,
    map: map,
    zoom: false
  });
  parser.parseKmlString(testKML);
}

google.maps.event.addDomListener(window, "load", initialize);
var testKML = '<?xml version="1.0" encoding="UTF-8" ?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><Style id="yellow_pin"><IconStyle><scale>1.1</scale><Icon><href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href></Icon><hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/></IconStyle></Style><Style id="arrow_reverse"><IconStyle><scale>1.1</scale><Icon><href>http://maps.google.com/mapfiles/kml/shapes/arrow-reverse.png</href></Icon><hotSpot x="54" y="42" xunits="pixels" yunits="pixels"/></IconStyle></Style><Style id="marker_A"><IconStyle><scale>1.1</scale><Icon><href>http://maps.google.com/mapfiles/kml/paddle/A.png</href></Icon><hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/></IconStyle></Style><Placemark><styleUrl>#yellow_pin</styleUrl><name><![CDATA[marker 1]]></name><description><![CDATA[description 1]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>107.666015625,12.81152174509788,0</coordinates></Point></Placemark><Placemark><styleUrl>#arrow_reverse</styleUrl><name><![CDATA[marker 2]]></name><description><![CDATA[description 2]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>100.0634765625,4.402391829093915,0</coordinates></Point></Placemark><Placemark><styleUrl>#marker_A</styleUrl><name><![CDATA[marker 3]]></name><description><![CDATA[description 3]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>99.5361328125,11.64007838467894,0</coordinates></Point></Placemark><Placemark><name><![CDATA[marker 4]]></name><description><![CDATA[description 4]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>105.556640625,38.65119833229951,0</coordinates></Point></Placemark><Placemark><name><![CDATA[marker 5]]></name><description><![CDATA[description 5]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>-93.1201171875,42.032974332441405,0</coordinates></Point></Placemark></Document></kml>';

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<div id="map"></div>

KML overriding default view after loading

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in KML

Related Questions in GEOXML3

Trending Questions

Popular # Hahtags

Popular Questions