Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>antyrat posted about this with an infoWindow to the right of the marker here:</p> <p><a href="https://stackoverflow.com/questions/3364533/googlemap-custom-infowindow">Googlemap custom infowindow</a></p> <p>See the link in the accepted answer.</p> <hr> <p>EDIT: Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:</p> <pre><code>function initialize() { var styles = [ ]; // Styles removed to simplify code var styledMap = new google.maps.StyledMapType(styles, {name: "HEPAC"}); var mapOptions = { zoom: 7, center: new google.maps.LatLng(46.69504, -67.69751), panControl: false, mapTypeControl: false, streetViewControl: false, noClear: true, zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, mapTypeControlOptions: { mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP] } }; google.maps.visualRefresh = true; var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); map.mapTypes.set('map_style', styledMap); map.setMapTypeId('map_style'); var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum &amp; maximum zoom level map.setOptions(opt); var ctaLayer = new google.maps.KmlLayer({ url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3', preserveViewport: true, }); ctaLayer.setMap(map); google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) { var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map}); }); } </code></pre> <p>Google Maps API says:</p> <blockquote> <p>Additionally, a click on a KML feature generates a KmlMouseEvent, which passes the following information: position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally the clicked location for polygons, polylines, and GroundOverlays, but the true origin for markers. pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically 0,0 but for markers includes the height of the marker. featureData contains a JSON structure of KmlFeatureData.</p> </blockquote> <p>See this page for more info: <a href="https://developers.google.com/maps/documentation/javascript/layers#KMLLayers" rel="nofollow noreferrer">KML Feature Details</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload