[Google Maps API v3] Re: Resize MVC Radius
So at the end of the day, I ended up destroying the original circle (not either of the widgets which is where I had been looking) and created a new one. so var circle; within my keyup event circle.setMap(); //destroy existing circle var distanceWidget = new DistanceWidget(map1); //create a new circle Thanks Martin and Rossko. I appreciate the help. -- 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/-/iHVM6AS0JoMJ. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: Resize MVC Radius
I've actually been looking at it for hours but can't seem to figure out how to declare the widgets so they are public. I don't mean to be the slow kid in the class . . . . . but perhaps I am. Thanks for any suggestions. -- 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/-/n_s6i1zS89sJ. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: Resize MVC Radius
within the keyup of my input I've added:
var myRadiusWidget=RadiusWidget();
myRadiusWidget.set('distance',8000);
I think the issue may be a scope issue.
I can set a new radius with
var distanceWidget = new DistanceWidget(map1);
so if I can delete the prior circle (how?), I can just create a new one.
I think the fundamental issue is I don't know how to address the existing
circle.
Thanks again.
My code is as follows:
* A distance widget that will display a circle that can be resized
and will
* provide the radius in km.
*
* @param {google.maps.Map} map The map to attach to.
*
* @constructor
*/
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
draggable: true,
title: 'Move me!'
});
// Bind the marker map property to the DistanceWidget map property
marker.bindTo('map', this);
// Bind the marker position property to the DistanceWidget position
// property
marker.bindTo('position', this);
// Create a new radius widget
var radiusWidget = new RadiusWidget();
// Bind the radiusWidget map to the DistanceWidget map
radiusWidget.bindTo('map', this);
// Bind the radiusWidget center to the DistanceWidget position
radiusWidget.bindTo('center', this, 'position');
// Bind to the radiusWidgets' distance property
this.bindTo('distance', radiusWidget);
// Bind to the radiusWidgets' bounds property
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/**
* A radius widget that add a circle to a map and centers on a marker.
*
* @constructor
*/
function RadiusWidget() {
var circle = new google.maps.Circle({
strokeColor: "#FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF",
fillOpacity: 0.05
});
// Set the distance property value, default to 3 mi (*km).
this.set('distance', radiusSlider*1.609344);
// Bind the RadiusWidget bounds property to the circle bounds
property.
this.bindTo('bounds', circle);
// Bind the circle center to the RadiusWidget center property
circle.bindTo('center', this);
// Bind the circle map to the RadiusWidget map
circle.bindTo('map', this);
// Bind the circle radius property to the RadiusWidget radius
property
circle.bindTo('radius', this);
// Add the sizer marker
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
/**
* Update the radius when the distance has changed.
*/
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
/**
* Add the sizer marker to the map.
*
* @private
*/
RadiusWidget.prototype.addSizer_ = function() {
var sizer = new google.maps.Marker({
draggable: true,
title: 'Drag me!',
icon: 'handle.png'
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function() {
// Set the circle distance (radius)
me.setDistance();
});
};
/**
* Update the center of the circle and position the sizer back on the
line.
*
* Position is bound to the DistanceWidget so this is expected to
change when
* the position of the distance widget is changed.
*/
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
// Bounds might not always be set so check that it exists first.
if (bounds) {
var lng = bounds.getNorthEast().lng();
// Put the sizer at center, right on the circle.
var position = new google.maps.LatLng(this.get('center').lat(),
lng);
this.set('sizer_position', position);
}
};
/**
* Calculates the distance between two latlng points in km.
* @see http://www.movable-type.co.uk/scripts/latlong.html
*
* @param {google.maps.LatLng} p1 The first lat lng point.
* @param {google.maps.LatLng} p2 The second lat lng point.
* @return {number} The distance between the two points in km.
* @private
*/
RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371; // Radius of the Earth in km
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 18
[Google Maps API v3] Resize MVC Radius
I've built a map where a circle can be resized by dragging the edge. It is
based on Luke Mahe's example at
http://code.google.com/apis/maps/articles/mvcfun.html. I'd like to add an
input field which will resize the circle based on the value of the input. I
can do this by calling the init() function again but there must be a way to
just resize the circle without reloading the map. I thought it was going to
be RadiusWidget.prototype.set('distance',the_input_value) but no success
with that.
Can someone please point me in the right direction? Thanks in advance for
your help.
--
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/-/UOwo_luq0rsJ.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: V3 Version of addoverlays
Sorry for being unclear - I had looked at the documentation and wasn't "getting it". I'm there now in terms of being able to turn layers on and off. Last step is to sync the infowindows. The correct data appears but always attached to the last point. I think I need to create unique markers and infowindows. Thanks for the follow up. On Jun 21, 9:32 am, Nathan Raley wrote: > Not seeing what? The documentation for MarkerManager? > > > > On Fri, Jun 18, 2010 at 7:27 PM, finco wrote: > > Not seeing it - anyone have an example? > > > On Jun 18, 12:45 pm, finco wrote: > > > Thanks Nathan - never used marker manager - I'll look at the > > > documentation and some examples. > > > > On Jun 18, 9:29 am, Nathan Raley wrote: > > > > > I would recommend keeping what you have and instead of adding them as > > > > overlays use the marker manager. > > > > > You can push arrays of markers to the marker manager as well as remove > > whole > > > > arrays of markers with it as well so with what you have it would be > > very > > > > simple to add and/or remove markers that you have stored in arrays. > > > > > Let me know if that helps. > > > > > On Fri, Jun 18, 2010 at 6:21 AM, finco wrote: > > > > > Hi all, > > > > > > In v2 I had a map of points that represented three related groups of > > > > > points. I presented each point with a red, blue or pruple icon > > > > > depending on the group. The points were loaded into three arrays and > > > > > each group created it's own set of markers using addoverlays. By > > > > > doing this, I was able to toggle the visibility of the whole group > > > > > without having to create and destroy the markers each time I wanted > > to > > > > > change their visibility. > > > > > > I'm a bit puzzled how to do this in V3. Can someone point me in the > > > > > right direction as to how to create the markers once they are sitting > > > > > in my array. Previously, it might have looked like: > > > > > > map.addOverlays(AllMarkers1); > > > > > AllMarkers1Visible = true; > > > > > map.addOverlays(AllMarkers2); > > > > > AllMarkers2Visible = true; > > > > > map.addOverlays(AllMarkers3); > > > > > AllMarkers3Visible = true; > > > > > > where each of the AllMarkersX items held point, icon and other info. > > > > > > Any help is appreciate. Thanks. > > > > > > -- > > > > > 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-maps-js-api...@googlegroups.com.> > To > > > > > unsubscribe from > > this group, send email > > to>>google-maps-js-api-v3+unsubscr...@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-maps-js-api...@googlegroups.com. > > To unsubscribe from this group, send email > > to>google-maps-js-api-v3+unsubscr...@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-maps-js-api...@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: V3 Version of addoverlays
Not seeing it - anyone have an example? On Jun 18, 12:45 pm, finco wrote: > Thanks Nathan - never used marker manager - I'll look at the > documentation and some examples. > > On Jun 18, 9:29 am, Nathan Raley wrote: > > > > > I would recommend keeping what you have and instead of adding them as > > overlays use the marker manager. > > > You can push arrays of markers to the marker manager as well as remove whole > > arrays of markers with it as well so with what you have it would be very > > simple to add and/or remove markers that you have stored in arrays. > > > Let me know if that helps. > > > On Fri, Jun 18, 2010 at 6:21 AM, finco wrote: > > > Hi all, > > > > In v2 I had a map of points that represented three related groups of > > > points. I presented each point with a red, blue or pruple icon > > > depending on the group. The points were loaded into three arrays and > > > each group created it's own set of markers using addoverlays. By > > > doing this, I was able to toggle the visibility of the whole group > > > without having to create and destroy the markers each time I wanted to > > > change their visibility. > > > > I'm a bit puzzled how to do this in V3. Can someone point me in the > > > right direction as to how to create the markers once they are sitting > > > in my array. Previously, it might have looked like: > > > > map.addOverlays(AllMarkers1); > > > AllMarkers1Visible = true; > > > map.addOverlays(AllMarkers2); > > > AllMarkers2Visible = true; > > > map.addOverlays(AllMarkers3); > > > AllMarkers3Visible = true; > > > > where each of the AllMarkersX items held point, icon and other info. > > > > Any help is appreciate. Thanks. > > > > -- > > > 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-maps-js-api...@googlegroups.com.> > To unsubscribe from > > > this group, send email > > > to>google-maps-js-api-v3+unsubscr...@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-maps-js-api...@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: V3 Version of addoverlays
Thanks Nathan - never used marker manager - I'll look at the documentation and some examples. On Jun 18, 9:29 am, Nathan Raley wrote: > I would recommend keeping what you have and instead of adding them as > overlays use the marker manager. > > You can push arrays of markers to the marker manager as well as remove whole > arrays of markers with it as well so with what you have it would be very > simple to add and/or remove markers that you have stored in arrays. > > Let me know if that helps. > > > > On Fri, Jun 18, 2010 at 6:21 AM, finco wrote: > > Hi all, > > > In v2 I had a map of points that represented three related groups of > > points. I presented each point with a red, blue or pruple icon > > depending on the group. The points were loaded into three arrays and > > each group created it's own set of markers using addoverlays. By > > doing this, I was able to toggle the visibility of the whole group > > without having to create and destroy the markers each time I wanted to > > change their visibility. > > > I'm a bit puzzled how to do this in V3. Can someone point me in the > > right direction as to how to create the markers once they are sitting > > in my array. Previously, it might have looked like: > > > map.addOverlays(AllMarkers1); > > AllMarkers1Visible = true; > > map.addOverlays(AllMarkers2); > > AllMarkers2Visible = true; > > map.addOverlays(AllMarkers3); > > AllMarkers3Visible = true; > > > where each of the AllMarkersX items held point, icon and other info. > > > Any help is appreciate. Thanks. > > > -- > > 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-maps-js-api...@googlegroups.com. > > To unsubscribe from this group, send email > > to>google-maps-js-api-v3+unsubscr...@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-maps-js-api...@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] V3 Version of addoverlays
Hi all, In v2 I had a map of points that represented three related groups of points. I presented each point with a red, blue or pruple icon depending on the group. The points were loaded into three arrays and each group created it's own set of markers using addoverlays. By doing this, I was able to toggle the visibility of the whole group without having to create and destroy the markers each time I wanted to change their visibility. I'm a bit puzzled how to do this in V3. Can someone point me in the right direction as to how to create the markers once they are sitting in my array. Previously, it might have looked like: map.addOverlays(AllMarkers1); AllMarkers1Visible = true; map.addOverlays(AllMarkers2); AllMarkers2Visible = true; map.addOverlays(AllMarkers3); AllMarkers3Visible = true; where each of the AllMarkersX items held point, icon and other info. Any help is appreciate. Thanks. -- 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-maps-js-api...@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: jquery tabs and infowindow
Finally got it working by changing the whole concept. I've attached a
function that loads the streetview when the tab is clicked rather than
when the marker is created. . Link is at
http://www.keypointpartners.com/test/mab/fromxml1.html.
On Jun 16, 9:08 am, finco wrote:
> Hi all,
>
> My test page is athttp://www.keypointpartners.com/test/mab/fromxml1.html
>
> Goal: Infowindow to produce jquery tabs with one tab presenting
> streetview from clicked
> Status: Works on all but the first instance of the infowindow - map
> canvas is drawn but no streetview. Have checked an the div the
> streetview goes into exists at the time of the call. The second and
> succeeding clicks operate properly (although still ugly at this
> point).
>
> The operative part of the code is the listener(s). The second
> listener was necessary to make sure that the infowindow was finished
> loading dom elements within it before other calls are made. Here's
> that section:
>
> google.maps.event.addListener(marker, "click", function() {
> if (infowindow) infowindow.close();
> infowindow = new google.maps.InfoWindow({content: text});
> infowindow.open(map, marker);
> var panoramaOptions = {
> position: marker.position
> };
>
> google.maps.event.addListener(infowindow, 'domready', function()
> {
> //if ($('#pano').length==0){alert("pano does not exist
> yet"}
> var panorama = new
> google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOpti
> ons);
> map.setStreetView(panorama);
> $(".tabs").tabs();
> });
> });
>
> Thanks for your help.
--
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-maps-js-api...@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: Unknown cities
Not a maps answer but you can always validate the string - if the ending does not end with UK, United Kingdom, England, etc., modify the string that's submitted. Ashley wrote: > Nice - thank you!. Any idea how we get it always defaulting to uk > without user adding UK afterwards? > > On Jun 16, 10:43 am, pi5701 wrote: > > try 'cambridge uk' ;) -- 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-maps-js-api...@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] jquery tabs and infowindow
Hi all,
My test page is at http://www.keypointpartners.com/test/mab/fromxml1.html
Goal: Infowindow to produce jquery tabs with one tab presenting
streetview from clicked
Status: Works on all but the first instance of the infowindow - map
canvas is drawn but no streetview. Have checked an the div the
streetview goes into exists at the time of the call. The second and
succeeding clicks operate properly (although still ugly at this
point).
The operative part of the code is the listener(s). The second
listener was necessary to make sure that the infowindow was finished
loading dom elements within it before other calls are made. Here's
that section:
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: text});
infowindow.open(map, marker);
var panoramaOptions = {
position: marker.position
};
google.maps.event.addListener(infowindow, 'domready', function()
{
//if ($('#pano').length==0){alert("pano does not exist
yet"}
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
$(".tabs").tabs();
});
});
Thanks for your help.
--
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-maps-js-api...@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: Add Listener & JQuery
Getting closer - the following code displays the streetview in the tab
on all but the first instance. Any idea why the domready doesn't work
here and what I can do about it?
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: text});
infowindow.open(map, marker);
var panoramaOptions = {
position: marker.position
};
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
google.maps.event.addListener(infowindow, 'domready', function()
{
map.setStreetView(panorama);
$(".tabs").tabs();
});
});
On Jun 14, 5:22 am, finco wrote:
> the link ishttp://www.keypointpartners.com/test/mab/fromxml.html
>
> I have adjusted the listener and now the tabs appear on the first
> instance of the infowindow but now the streetviw does not render
> (first instance or otherwise).
>
> The listener has been adjusted to:
>
> google.maps.event.addListener(marker, "click", function() {
> if (infowindow) infowindow.close();
> infowindow = new google.maps.InfoWindow({content: text});
> infowindow.open(map, marker);
>
> google.maps.event.addListener(infowindow, 'domready', function()
> {
> var panoramaOptions = {
> position: marker.position
> };
> var panorama = new
> google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
> map.setStreetView(panorama);
> //alert(panorama.position);
> $(".tabs").tabs();
> });
> });
>
> Thanks.
>
> On Jun 13, 8:28 pm, Ralph Ames wrote:
>
> > Have you got a link to your map?
>
> > Ralph
> > -www.easypagez.com/maps/map_index.htmlwww.easypagez.com/maps/v3_basicm...
>
> > --
> > 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-maps-js-api...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-maps-js-api-v3+unsubscr...@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-maps-js-api...@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: Add Listener & JQuery
Getting closer - the following code displays the streetview in the tab
on all but the first instance. Any idea why the domready doesn't work
here and what I can do about it?
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: text});
infowindow.open(map, marker);
var panoramaOptions = {
position: marker.position
};
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
google.maps.event.addListener(infowindow, 'domready', function()
{
map.setStreetView(panorama);
$(".tabs").tabs();
});
});
On Jun 14, 5:22 am, finco wrote:
> the link ishttp://www.keypointpartners.com/test/mab/fromxml.html
>
> I have adjusted the listener and now the tabs appear on the first
> instance of the infowindow but now the streetviw does not render
> (first instance or otherwise).
>
> The listener has been adjusted to:
>
> google.maps.event.addListener(marker, "click", function() {
> if (infowindow) infowindow.close();
> infowindow = new google.maps.InfoWindow({content: text});
> infowindow.open(map, marker);
>
> google.maps.event.addListener(infowindow, 'domready', function()
> {
> var panoramaOptions = {
> position: marker.position
> };
> var panorama = new
> google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
> map.setStreetView(panorama);
> //alert(panorama.position);
> $(".tabs").tabs();
> });
> });
>
> Thanks.
>
> On Jun 13, 8:28 pm, Ralph Ames wrote:
>
> > Have you got a link to your map?
>
> > Ralph
> > -www.easypagez.com/maps/map_index.htmlwww.easypagez.com/maps/v3_basicm...
>
> > --
> > 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-maps-js-api...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-maps-js-api-v3+unsubscr...@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-maps-js-api...@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: Add Listener & JQuery
the link is http://www.keypointpartners.com/test/mab/fromxml.html
I have adjusted the listener and now the tabs appear on the first
instance of the infowindow but now the streetviw does not render
(first instance or otherwise).
The listener has been adjusted to:
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: text});
infowindow.open(map, marker);
google.maps.event.addListener(infowindow, 'domready', function()
{
var panoramaOptions = {
position: marker.position
};
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
//alert(panorama.position);
$(".tabs").tabs();
});
});
Thanks.
On Jun 13, 8:28 pm, Ralph Ames wrote:
> Have you got a link to your map?
>
> Ralph
> -www.easypagez.com/maps/map_index.htmlwww.easypagez.com/maps/v3_basicmap.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-maps-js-api...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-maps-js-api-v3+unsubscr...@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-maps-js-api...@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
[Google Maps API v3] Re: Add Listener & JQuery
A little more research make me think that I might have to check for
"domready" before applying the jquery attributes. Can someone shed
some light here? I've looked at a couple examples but don't seem to
follow.
On Jun 13, 4:16 pm, finco wrote:
> This is probably obvious to someone out there but it's killing me! My
> code is posted below. I am using jquery along with google maps in
> order to present a tabbed infowindow. There is some text on the first
> tab and a streetview of the location on the second. Both these
> elements work correctly AFTER I have called up the first infowindow.
> On the first window, neither the tabs nor the streetview show - any
> ideas on what I've done wrong?
>
> Thanks in advance for your help.
>
> http://maps.google.com/maps/api/js</a>?
> sensor=false">
>
> http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/
> redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
> http://ajax.googleapis.com/ajax/libs/jquery/1.4/</a>
> jquery.min.js">
> http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/</a>
> jquery-ui.min.js">
>
>
> var infowindow;
> var map;
>
> $(function() {
> var myLatlng = new google.maps.LatLng(0, 0);
> var myOptions = {
> zoom: 10,
> center: myLatlng,
> mapTypeId: google.maps.MapTypeId.ROADMAP
> //streetViewControl: true
> }
> map = new google.maps.Map(document.getElementById("map_canvas"),
> myOptions);
> downloadUrl("../ReadExcel/ExcelToMap-test.asp", function(data) {
> var markers =
> data.documentElement.getElementsByTagName("marker");
> var propName;
> var propAddress;
> var propCity;
> var propState;
> var propService;
> var propType;
> var propSF;
>
> //creates a variable used to hold the outer dimensions of map
> var bounds = new google.maps.LatLngBounds();
> //read data
> for (var i = 0; i < markers.length; i++) {
> var latlng = new
> google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
> parseFloat(markers[i].getAttribute("lng")));
> propName=markers[i].getAttribute("propName");
> propAddress=markers[i].getAttribute("propAddress");
> propCity=markers[i].getAttribute("propCity");
> propState=markers[i].getAttribute("propState");
> propService=markers[i].getAttribute("propService");
> propType=markers[i].getAttribute("propType");
> propSF=markers[i].getAttribute("propSF");
> propTeam=markers[i].getAttribute("propTeam");
> //define which icon is to be used
> var icon;
> if (propService=="M") {icon =" ../../gmaps/images/circle-
> red.gif"}
> else if (propService=="L") {icon = "../../gmaps/images/circle-
> blue.gif"}
> else {icon = "../../gmaps/images/circle-purple.gif"};
> //create html text for inside popup
> var text = [
> '<div id="InfoText">',
> '<div class="tabs"><ul><li><a href="#tab1">General</a></
> li>',
> '<li><a href="#tab2">Street View</a></li></ul>',
> '<div id="tab1">',
> '<b>' + propName + '</b> - ' + propType + '<BR>',
> propAddress + '<BR>',
> propCity + ', ' + propState + '<BR>',
> propSF + ' SF<BR>',
> 'Team: ' + propTeam + '<BR>',
> '</div>',
> '<div id="tab2">',
> '<div id="pano"></div>',
> '</div>',
> '</div>'
> ].join('');
>
> var marker = createMarker(text, latlng, icon);
> //sets the zoom to show all points
> bounds.extend(latlng);
> map.fitBounds(bounds);
> }
>
> });
>
> });
>
> function createMarker(text, latlng, icon) {
> var image = new google.maps.MarkerImage(icon,
> // This marker is 15 pixels wide by 15 pixels tall.
> new google.maps.Size(15, 15),
> // The origin for this image is 0,0.
> new google.maps.Point(0,0),
> // The anchor
[Google Maps API v3] Add Listener & JQuery
This is probably obvious to someone out there but it's killing me! My
code is posted below. I am using jquery along with google maps in
order to present a tabbed infowindow. There is some text on the first
tab and a streetview of the location on the second. Both these
elements work correctly AFTER I have called up the first infowindow.
On the first window, neither the tabs nor the streetview show - any
ideas on what I've done wrong?
Thanks in advance for your help.
http://maps.google.com/maps/api/js?
sensor=false">
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/
redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
http://ajax.googleapis.com/ajax/libs/jquery/1.4/
jquery.min.js">
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/
jquery-ui.min.js">
var infowindow;
var map;
$(function() {
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
//streetViewControl: true
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
downloadUrl("../ReadExcel/ExcelToMap-test.asp", function(data) {
var markers =
data.documentElement.getElementsByTagName("marker");
var propName;
var propAddress;
var propCity;
var propState;
var propService;
var propType;
var propSF;
//creates a variable used to hold the outer dimensions of map
var bounds = new google.maps.LatLngBounds();
//read data
for (var i = 0; i < markers.length; i++) {
var latlng = new
google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
propName=markers[i].getAttribute("propName");
propAddress=markers[i].getAttribute("propAddress");
propCity=markers[i].getAttribute("propCity");
propState=markers[i].getAttribute("propState");
propService=markers[i].getAttribute("propService");
propType=markers[i].getAttribute("propType");
propSF=markers[i].getAttribute("propSF");
propTeam=markers[i].getAttribute("propTeam");
//define which icon is to be used
var icon;
if (propService=="M") {icon =" ../../gmaps/images/circle-
red.gif"}
else if (propService=="L") {icon = "../../gmaps/images/circle-
blue.gif"}
else {icon = "../../gmaps/images/circle-purple.gif"};
//create html text for inside popup
var text = [
'',
'',
'',
'' + propName + ' - ' + propType + '
',
propAddress + '
',
propCity + ', ' + propState + '
',
propSF + ' SF
',
'Team: ' + propTeam + '
',
'',
'',
'',
'',
''
].join('');
var marker = createMarker(text, latlng, icon);
//sets the zoom to show all points
bounds.extend(latlng);
map.fitBounds(bounds);
}
});
});
function createMarker(text, latlng, icon) {
var image = new google.maps.MarkerImage(icon,
// This marker is 15 pixels wide by 15 pixels tall.
new google.maps.Size(15, 15),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image
new google.maps.Point(0, 0));
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon:image
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: text});
infowindow.open(map, marker);
$("#pano").html="";
var panoramaOptions = {
position: marker.position
};
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
$(".tabs").tabs();
});
return marker;
}
/*
function createMarker(name, latlng) {
var marker = new google.maps.Marker({position: latlng, map: map});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
old create marker
function createMarker(text, latlng, icon) {
var image = new google.maps.MarkerImage(icon,
// This marker is 15 pixels wide by 15 pixels tall.
new google.maps.Size(15, 15),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image
new google.maps.Point(0, 0));
var marker = new google.maps.Marker({position: latlng, map: map,
icon:
