[Google Maps API v3] Initial Location and GEOXML Feed

116 views
Skip to first unread message

Bloripope

unread,
May 3, 2010, 10:25:13 AM5/3/10
to Google Maps JavaScript API v3
Hello Everyone!

First of all I want to say that this is a fantastic piece of code and
am very thankful that it has been made available to us. I work for
the Department of Emergency Management here in Virginia and have been
tasked to create a map/page (that will then be implemented in an
iPhone app) that zooms in on your current location via the <script
type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=true"></script> or initialLocation. Also we have several
GeoXML feeds that we will need to have displayed in the vicinity of
the user's current location.

We have had partial success in that I have one page that zooms in on
the initialLocation without any problems but doesn't show the GeoXML
feed. This test page is located here: http://www.gamecarver.com/map.html

Conversely, we have also been able to create a page that shows the
GeoXML feed and the callout windows but does not show or zoom in on
the initialLocation. This test page can be seen here:
http://www.gamecarver.com/map3.html

So in a nut shell...we are trying very hard to come up with the page
that does the zoom in on user's current location combined with the
GeoXML feed for that zoomed in vicinity. These pages have to be in
the "<div id="map_canvas" style="width:100%; height:100%"></div>"
format so that they display properly in the iPhone app.

Once we have this figured out I have to figure out how to display more
than one GeoXML feed at a time.

Below is my feeble attempt at combining the two functions but have yet
to figure it out. I would be absolutely incredible if someone would
be willing to help us out. We are trying to get a few tools in place
before hurricane season hits. Our mission is to save lives and
property and any mobile tools we can develop for our emergency
responders is paramount.

Thank you so much for taking the time to read this....below is the
code.

Jack

********************************************************************************

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: iPhone Geolocation</
title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=true"></script>
<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=ABQIAAAAw5BzHVctlqcdX2AtIbHzdhREwLgSgD5KyH21uJ9WYUXt4-
zK4BS0OmBpncr71qBor9WGbM7FJ4A_pA"
type="text/javascript"></script>
<script type="text/javascript">
var initialLocation;
var statepolice = new google.maps.LatLng(37.502168, -77.542212);
var geoXml;

function initialize() {
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

// Safari supports the W3C Geolocation method
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var placeMarker = new google.maps.Marker({
position: initialLocation,
map: map,
});
geoXml = new GGeoXml("https://cop.vdem.virginia.gov/gis_feeds/
GeoRSS2.ashx");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
map.setUIToDefault();
map.addOverlay(geoXml);
var placeMarker = new google.maps.Marker({
position: initialLocation,
map: map,
});
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation();
}

function handleNoGeolocation() {
initialLocation = statepolice;
map.setCenter(initialLocation);
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>

</html>

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
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.

Rossko

unread,
May 3, 2010, 1:02:09 PM5/3/10
to Google Maps JavaScript API v3
You're using API v2. That has its own group -
http://groups.google.com/group/Google-Maps-API

Jack Berberette

unread,
May 3, 2010, 1:04:11 PM5/3/10
to google-map...@googlegroups.com
Thanks Rossko....is there a way to do this with v3.  Would it be better to do it that way?

Jack
 PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  C: wait...

Jack Berberette

unread,
May 3, 2010, 1:56:09 PM5/3/10
to google-map...@googlegroups.com
I tried that link but could not find the answer.  I searched but couldn't find anything relevant.

I don't understand v2 v.s. v3 but all I'm trying to do is get this piece: var geoXml = new GGeoXml("https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx");

to show up as markers on the following code and don't know how to do it...I have commented out my attempts.  As soon as I un-comment them I get a blank screen.  The site is at http://www.gamecarver.com/maptest2.html ...I am really stuck and don't know what to do:


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: iPhone Geolocation</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript">
var initialLocation;
var statepolice = new google.maps.LatLng(37.502168, -77.542212);
// var geoXml = new GGeoXml("https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx");


function initialize() {
  var myOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  // Safari supports the W3C Geolocation method
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
     
        var placeMarker = new google.maps.Marker({
        position: initialLocation,
        map: map,
      });
      // map.addOverlay(geoXml);

      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation();
  }
 
  function handleNoGeolocation() {
    initialLocation = statepolice;
    map.setCenter(initialLocation);
  }
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>





Chad Killingsworth

unread,
May 3, 2010, 8:50:24 PM5/3/10
to Google Maps JavaScript API v3
The v3 API doesn't currently support KML data. It is however listed on
the development roadmap.

Chad Killingsworth

On May 3, 12:56 pm, Jack Berberette <spin...@gmail.com> wrote:
> I tried that link but could not find the answer.  I searched but couldn't
> find anything relevant.
>
> I don't understand v2 v.s. v3 but all I'm trying to do is get this piece:
> var geoXml = new GGeoXml("https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx");
>
> to show up as markers on the following code and don't know how to do it...I
> have commented out my attempts.  As soon as I un-comment them I get a blank
> screen.  The site is athttp://www.gamecarver.com/maptest2.html...I am
> >> google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> >> .
> >> For more options, visit this group at
> >>http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> >   PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank:
> > wait...  Traffic: wait...  Price: wait...  C: wait...
>
>  PR: wait... <javascript:{}> I: wait... <javascript:{}> L:
> wait...<javascript:{}> LD:
> wait... <javascript:{}> I: wait... <javascript:{}>wait... <javascript:{}> Rank:
> wait... <javascript:{}> Traffic: wait... <javascript:{}> Price:
> wait...<javascript:{}> C:
> wait... <javascript:{}>

Jack Berberette

unread,
May 3, 2010, 10:22:42 PM5/3/10
to google-map...@googlegroups.com
Hi Chad,

Thanks for the quick response.  Is it possible to do this with an XML feed.  If not...can this be done with v2?

Thanks,

Jack

Chad Killingsworth

unread,
May 4, 2010, 7:22:57 PM5/4/10
to Google Maps JavaScript API v3
Technically the v2 API will load on an iPhone, but it horribly slow.
See http://www.youtube.com/watch?v=zI8at1EmJjA for information on
exactly how slow.

Were I implementing this, I would read the XML file on the server and
change it into a JSON object. I just happen to have an XSLT to change
XML into JSON: http://calendar.missouristate.edu/feed/json.xsl -
you'll need to specify the callback variable and the array elements
variable at the top of the XSL. The array elements variable lists out
any nodes that can occur more than once. For RSS you might use "|item|
category|". See http://code.google.com/apis/gdata/docs/json.html for
more information on how this works.

Once you have a JSON object, you simply loop through the items and
place them on the map.
for(var i = 0; i < JSONObj.rss.channel.item.length; i++) {
var latLng = new
google.maps.LatLng(parseInt(JSONObj.rss.channel.item[i].geo$lat, 10),
parseInt(JSONObj.rss.channel.item[i].geo$long, 10));
//create marker with latLng ...
}

Good luck,
Chad Killingsworth
> > > >> google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com><google-maps-js-api-v3%2B
> > unsub...@googlegroups.com>
> > > >> .
> > > >> For more options, visit this group at
> > > >>http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > > >   PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...
> >  Rank:
> > > > wait...  Traffic: wait...  Price: wait...  C: wait...
>
> > >  PR: wait... <javascript:{}> I: wait... <javascript:{}> L:
> > > wait...<javascript:{}> LD:
> > > wait... <javascript:{}> I: wait... <javascript:{}>wait... <javascript:{}>
> > Rank:
> > > wait... <javascript:{}> Traffic: wait... <javascript:{}> Price:
> > > wait...<javascript:{}> C:
> > > wait... <javascript:{}>
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>

Jack Berberette

unread,
May 6, 2010, 8:06:55 AM5/6/10
to google-map...@googlegroups.com
Hi Chad,

Sorry for the delayed response.  Thanks so much for taking the time to share this info with me.  I passed this along to my team and we are going to take a look at giving this a go :)

Jack
 PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  C: wait...

--

Jack Berberette

unread,
May 6, 2010, 8:13:41 AM5/6/10
to google-map...@googlegroups.com
Hi Chad,

I do have a quick question about the XSLT you have...and please forgive me my newbiness :-)  How would I call something like https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx into the XSLT you have to create the JSON object....and how would I call the output object.  Does the XSLT have a place to put in a URL and a place to name the output JSON?

Sorry....just really new to this.

Jack
 PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  C: wait...

--

Chad Killingsworth

unread,
May 6, 2010, 10:46:50 AM5/6/10
to Google Maps JavaScript API v3
I'll email you example code off list.

Chad Killingsworth

On May 6, 7:13 am, Jack Berberette <spin...@gmail.com> wrote:
> Hi Chad,
>
> I do have a quick question about the XSLT you have...and please forgive me
> my newbiness :-)  How would I call something likehttps://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashxinto the XSLT you have
> to create the JSON object....and how would I call the output object.  Does
> the XSLT have a place to put in a URL and a place to name the output JSON?
>
> Sorry....just really new to this.
>
> Jack
>
> On Tue, May 4, 2010 at 7:22 PM, Chad Killingsworth <
>
>
>
>
>
> chadkillingswo...@missouristate.edu> wrote:
> > Technically the v2 API will load on an iPhone, but it horribly slow.
> > Seehttp://www.youtube.com/watch?v=zI8at1EmJjAfor information on
> > > > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com><google-maps-js-api-v3%2B
> > unsub...@googlegroups.com>
> > > > .
> > > > > For more options, visit this group athttp://
> > > > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > > > --
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "Google Maps JavaScript API v3" group.
> > > > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com><google-maps-js-api-v3%2B
> > unsub...@googlegroups.com>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
>  PR: wait... <javascript:{}> I: wait... <javascript:{}> L:
> wait...<javascript:{}> LD:
> wait... <javascript:{}> I: wait... <javascript:{}>wait... <javascript:{}> Rank:
> wait... <javascript:{}> Traffic: wait... <javascript:{}> Price:
> wait...<javascript:{}> C:
> wait... <javascript:{}>
>
> --
> You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
> To post to this group, send email to google-map...@googlegroups.com.

Jack Berberette

unread,
May 6, 2010, 11:51:41 AM5/6/10
to google-map...@googlegroups.com
Thanks Chad
 PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  C: wait...

--

Norman

unread,
May 6, 2010, 3:34:52 PM5/6/10
to Google Maps JavaScript API v3
Hi Chad, you have been quite explicit with your answers, adding KML
support is really a missed feature for V3. Also I see still cannot use
customs maps (OpenStreet maps layers) of other type of maps..

Where in the Roadmap we can see when the features of the V2 be
implemented in v3 ?

regards


On May 6, 9:51 am, Jack Berberette <spin...@gmail.com> wrote:
> Thanks Chad
>
> On Thu, May 6, 2010 at 10:46 AM, Chad Killingsworth <
>
>
>
> chadkillingswo...@missouristate.edu> wrote:
> > I'll email you example code off list.
>
> > Chad Killingsworth
>
> > On May 6, 7:13 am, Jack Berberette <spin...@gmail.com> wrote:
> > > Hi Chad,
>
> > > I do have a quick question about the XSLT you have...and please forgive
> > me
> > > my newbiness :-)  How would I call something likehttps://
> > cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashxinto the XSLT you have
> > > to create the JSON object....and how would I call the output object.
> >  Does
> > > the XSLT have a place to put in a URL and a place to name the output
> > JSON?
>
> > > Sorry....just really new to this.
>
> > > Jack
>
> > > On Tue, May 4, 2010 at 7:22 PM, Chad Killingsworth <
>
> > > chadkillingswo...@missouristate.edu> wrote:
> > > > Technically the v2 API will load on an iPhone, but it horribly slow.
> > > > Seehttp://www.youtube.com/watch?v=zI8at1EmJjAforinformation on
> ...
>
> read more »
Reply all
Reply to author
Forward
0 new messages