Solved

Embed Google My Maps with Dynamic KML

Posted on 2015-01-08
5
701 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
  • 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 35

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 35

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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This Micro Tutorial demonstrates in Google Analytics how to create a custom report that shows you traffic over time using the month of year dimensions. There are also instructions on how to fix Google's odd month of year formatting, which Microsoft …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

685 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