Solved

Embed Google My Maps with Dynamic KML

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
This Micro Tutorial demonstrates the importance of annotations in Google Analytics and how they should be used to document changes made to a site, Google updates (Ex: Panda & Penguin), marketing campaigns, and any other events that might have contri…
This Micro Tutorial will demonstrate how marketers can use the Mobile Emulation Tool in Chrome Developer Tool. This will let you preview your site on any mobile device.

932 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

13 Experts available now in Live!

Get 1:1 Help Now