Solved

Embed Google My Maps with Dynamic KML

Posted on 2015-01-08
5
746 Views
Last Modified: 2015-01-08
The feature of being able to pull in a kml file from a ?q= querystring on to a googlemap is being decpracted in favour of Google's newer My Map system:

Viewing KML data in Google Maps

You may have received a notification in product saying "A Google Maps feature used on this page is changing soon. Custom map content will need to be migrated."

After February 2015, you will no longer able to view custom KML content in the classic version of Google Maps. KML is the file format Google Earth uses for the exchange of geographic information.


[https://support.google.com/maps/answer/41136?p=kml&hl=en&rd=1]

I currently generate a kml file from a database depending on various parameters and display if using a URL: https://maps.google.com/maps?hl=en&q=http://www.smartinsight.co.uk/loyalty/kml/MemberCount-29.kml&ie=UTF8&t=m&source=embed&output=classic&dg=feature

From February I will not be able to do this!

Can anyone show me a way of using a similar method with Google My Map or any other way to continue to include a kml file via a querystring in their new system.

Thanks
0
Comment
Question by:rwlloyd71
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 13

Accepted Solution

by:
Molnar István earned 250 total points
ID: 40537589
you can try this way:
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Layers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
/**
 * @fileoverview Sample showing capturing a KML file click
 *   and displaying the contents in a side panel instead of
 *   an InfoWindow
 */

var map;
var src = 'http://www.smartinsight.co.uk/loyalty/kml/MemberCount-29.kml';

/**
 * Initializes the map and calls the function that creates polylines.
 */
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  loadKmlLayer(src, map);
}

/**
 * Adds a KMLLayer based on the URL passed. Clicking on a marker
 * results in the balloon content being loaded into the right-hand div.
 * @param {string} src A URL for a KML file.
 */
function loadKmlLayer(src, map) {
  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}

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

</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>
</html>

Open in new window


hope it helps
0
 
LVL 36

Assisted Solution

by:Kimputer
Kimputer earned 250 total points
ID: 40537590
It's already documented if you read all the files and links:

sample:  https://developers.google.com/maps/documentation/javascript/examples/layer-kml

Basically since you already host the KML file yourself, just make it an html file on that same website.
0
 

Author Comment

by:rwlloyd71
ID: 40537819
Thank you both.

Just a quick question, can I insert the link to the kml file as a querystring and then pick it up in the javascript within the html file.

So the url would be

http://www.xyz.com/map.php?q=http://www.smartinsight.co.uk/loyalty/kml/MemberCount-29.kml

Then in the code :

var map;
var src = '<?php $_GET["q"]?>';

Richard
0
 
LVL 36

Expert Comment

by:Kimputer
ID: 40537840
Javascript is purely client side, so in essence, it should work as described.
0
 

Author Closing Comment

by:rwlloyd71
ID: 40537886
Got the answers that i was looking for.

Thanks
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This Micro Tutorial will demonstrate the easy use of Gmail embedding images in your email so the recipient of your email can view them in context.
This Micro Tutorial will demonstrate how to use comments in Google Docs. You will learn how to create, edit, and delete a comment.

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question