HTML, KML, and the Noob

66 views
Skip to first unread message

Tom Peters

unread,
Nov 21, 2011, 6:08:49 PM11/21/11
to google-map...@googlegroups.com
Hello, all.

I'm fairly new to this, having only taken one class on the subject last fall. I'm currently volunteering at a police department in Eastern PA, where I have been charged with setting up a page on the department's website that maps out the daily/weekly crime blotter in google maps.

Now, I set out to do this with HTML and the v3 maps API this morning. Made some progress, got my feet wet again, remembered some things. Not much though. 

Then I remembered something about KML, and making the placemarks in Google earth. Did that, just 3 or 4, 1 for each hypothetical crime being committed.

So now, how do I get the KML file to be on the google map on my page?

Do I start in my text editor (dreamweaver) by calling HTML? or KML? I really need a refresher, because I did basically this exact same project last year in class.

Rossko

unread,
Nov 21, 2011, 6:44:46 PM11/21/11
to Google Maps JavaScript API v3
> So now, how do I get the KML file to be on the google map on my page?

You could try the docs
http://code.google.com/apis/maps/documentation/javascript/layers.html#KMLLayers
Your KML does need to be publicly available for Google's servers to
parse it

Tom Peters

unread,
Nov 21, 2011, 7:22:50 PM11/21/11
to google-map...@googlegroups.com
I looked at that, rossko, thanks. And I know you have to make your kml public, I have. Its just a matter of knowing what to type, and where to get it up on the map. Heres one of them: https://sites.google.com/site/duffyfileskml/westchesterfiles


Heres the code for the rest of the page. Like I said, very simple. Not enough for me apparenty :D


<!DOCTYPE html>
<html>
<head>

<center>
<big>
<b>
Borough of West Chester Police Blotter<br>
</b>
</big>
</center>

<center>
<i>November 23rd, 2011</i>
</center>

<br>


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(39.96, -75.605
);
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>

</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:80%; height:80%"></div>

<br>

1. DUI<br>
2. Disorderly Conduct<br>
3. Burglary<br>

<body bgcolor="#0066FF">

</body>

</html>

Rossko

unread,
Nov 21, 2011, 7:38:50 PM11/21/11
to Google Maps JavaScript API v3
> https://sites.google.com/site/duffyfileskml/westchesterfiles

Won't do; if I open that in a browser, I get a menu system. Google's
servers won't know what to do with that, they expect KML directly
In this case the url to supply to KmlLayer would be
https://sites.google.com/site/duffyfileskml/westchesterfiles/DUI.kml?attredirects=0&d=1

> Heres the code for the rest of the page. Like I said, very simple. Not
> enough for me apparenty :D

I can't see anywhere in your script where you've tried to add the code
in the docs example

Your HTML is pretty broken, with content in the <head>

Tom Peters

unread,
Nov 21, 2011, 8:27:46 PM11/21/11
to google-map...@googlegroups.com
Right, I didnt know where to add it or how to do so. And how do I get a link for the KML directly?

And where should I put </head>?

Thanks so much for helping me out here.

Ralph

unread,
Nov 21, 2011, 8:35:34 PM11/21/11
to google-map...@googlegroups.com
Perhaps try this:

http://www.w3schools.com/html/html_head.asp

Ralph

> --
> You received this message because you are subscribed to the Google
> Groups "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-maps-js-api-v3/-/hW3LFW4aifQJ.
> To post to this group, send email to
> google-map...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-maps-js-a...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Tom Peters

unread,
Nov 21, 2011, 8:42:05 PM11/21/11
to google-map...@googlegroups.com
alright i changed the <head>. I know it was stupid.

So how would I get


to show up on my map?

Ralph

unread,
Nov 21, 2011, 8:58:30 PM11/21/11
to google-map...@googlegroups.com
Try this link:

http://code.google.com/apis/maps/documentation/javascript/examples/layer-kml.html

Ralph

> --
> You received this message because you are subscribed to the Google
> Groups "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/google-maps-js-api-v3/-/DYm7_KtxH3UJ.

Tom Peters

unread,
Nov 22, 2011, 11:23:21 AM11/22/11
to google-map...@googlegroups.com
All that comes up when I click that link is the map

Tom Peters

unread,
Nov 22, 2011, 12:12:05 PM11/22/11
to google-map...@googlegroups.com
disregard that last one.

ok, well i've got the three placemarks into the code. its only reading it as the last one i put in.


<!DOCTYPE html>

<html>

<head>

<center>

<big>

<b>
Borough of West Chester Police Blotter<br>

</b>

</big>

</center>

<center>

<i>November 23rd, 2011</i>

</center

>
<br>

</head>






<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

  html { height: 100% }

  body { height: 100%; margin: 0; padding: 0 }

  #map_canvas { height: 100% }

</style>

<script type="text/javascript"

    src="http://maps.googleapis.com/maps/api/js?sensor=false">

</script>



<script type="text/javascript">

  function initialize() {

    var latlng = new google.maps.LatLng(39.96, -75.605
);

    var myOptions = {

      zoom: 14,

      center: latlng,

      mapTypeId: google.maps.MapTypeId.HYBRID

    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),

        myOptions);


var map = new google.maps.Map(document.getElementById("map_canvas"),
 myOptions);

  var DUI = new google.maps.KmlLayer('https://sites.google.com/site/duffyfileskml/westchesterfiles/DUI.kml?attredirects=0&d=1');
  DUI.setMap(map);


var map = new google.maps.Map(document.getElementById("map_canvas"),
 myOptions);

  var DOC = new google.maps.KmlLayer('https://sites.google.com/site/duffyfileskml/westchesterfiles/DisorderlyConduct.kml?attredirects=0&d=1');
  DOC.setMap(map);


var map = new google.maps.Map(document.getElementById("map_canvas"),
 myOptions);

  var BURG = new google.maps.KmlLayer('https://sites.google.com/site/duffyfileskml/westchesterfiles/Burglary.kml?attredirects=0&d=1');
  BURG.setMap(map);

 }



</script>

Rossko

unread,
Nov 22, 2011, 4:42:56 PM11/22/11
to Google Maps JavaScript API v3
> ok, well i've got the three placemarks into the code. its only reading it
> as the last one i put in.

Not sure what that means.
A link to a live demo would get you better help.
See "READ THIS FIRST"
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

Guessing, you might need to zoom out to see all your placemarks?
KmlLayer auto-zooms to the content by default, in this case the 'last'
KML trumps the previous.

Reply all
Reply to author
Forward
0 new messages