CODEWITHSUNDEEP
google-maps-api-3
porque_no_les_deux
porque_no_les_deux

Reputation: 479

How to show a static image in google maps?

Basically, I want to show a crosshairs in the middle of my map that stays in the center as the user pans around.

This is exactly what I'm talking about, except this example is kind of poorly implemented...it's very slow and jumpy when you pan fast.

http://www.daftlogic.com/sandbox-google-maps-centre-crosshairs.htm

Does anyone have any ideas for ways to implement this with the v3 maps api?

Upvotes: 1

Views: 771

Answers (1)

Heitor Chang
Heitor Chang

Reputation: 6057

By far the smoothest method I've seen uses a KML file. This is the original.

I stripped the KML to the bare minimum:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
      <ScreenOverlay>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/crosshairs.png</href>
        </Icon>
        <overlayXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <screenXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="pixels" yunits="pixels"/>
      </ScreenOverlay>
  </Document>
</kml>

In the maps code all you need to do is set the KML Layer with option preserveViewport=true. Note that if you're testing locally the KML file still has to be uploaded to a public location.

  var crosshairLayer = new google.maps.KmlLayer( 
      'http://freezoo.alwaysdata.net/justcrosshair2.kml', 
      {preserveViewport: true});

    crosshairLayer.setMap(map);

JSFiddle style 1 style 2

(They're two separate icons in two KML files.)

Upvotes: 2

Related Questions