Solved

Embed Google My Maps with Dynamic KML

Posted on 2015-01-08
5
623 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Whether you’re looking to gather data for research or gather feedback on an idea, being able to build and distribute your own online survey is not only cost-effective, but allows you to reach a larger audience and receive results in real-time. Googl…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This Micro Tutorial  demonstrates whether your site uses one subdomain or multiple subdomains, how to create full URLs from Google Analytics content reports. This procedure is called concatenation and can also be done with the CONCATENTATE function.…
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 …

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now