?
Solved

Embed Google My Maps with Dynamic KML

Posted on 2015-01-08
5
Medium Priority
?
875 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 1000 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 1000 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

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This Micro Tutorial will demonstrate Google Calendar to monitor updates with top sites, such as Facebook, Google, Twitter, etc. with Marketing News. Each update of Google Calendar can be monitored, correlate dips and spikes in your website traffic, …
This Micro Tutorial demonstrates how to quickly find related content for YourTango's posts using MozBar Chrome extension.
Suggested Courses

649 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