Needing help with Reverse Geo and then Multiple Markers on Custom Tiled Game Map
26 views
Skip to first unread message
Brad C
Jul 19, 2010, 11:41:32 AM7/19/10
to Google Maps JavaScript API v3
I've been reading through several articles on what I'm wanting to do
although it seems that I may be in a unique predicament in that
there's very little, if none, documentation on combining various
features. That or I'm dense which isn't all that unlikely, haha.
For starters...
With the help of William here at this forum I was able to complete the
brunt of my project which can be read here:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/5988e56946acad5e/b77e97ccb37989f0#b77e97ccb37989f0
Which helped me to implement a Google Map of my fave game:
http://www.google.com/url?sa=D&q=http://www.sacredwiki.org/index.php5/Sacred_2:Map_of_Ancaria
Now that the map is embeded there are two groups of markers I want to
place on the map. 89 markers which will be part of an "Employees"
group and another 30 markers which will be part of a "Bosses" group.
What I first need is a means to find out the numerical coord of the
points I wish to place the markers. For that I have been trying to
use "Draggable Markers" from the Google Maps V3 API Demo Gallery. To
no avail...
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
I desperately need help understanding how to code this. I've tried so
many variations of code and nothing I do will display both my custom
tiles map AND the drag-able marker. Any advice would be so very much
appreciated. Ii have next to no experience with javascript and I'm
having a heck of a time wrapping my head around it.
Below is my TestMap.html and the code contained within the html:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
<link href="standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script>
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this
location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Point A',
map: mymap,
draggable: true
});
var myLatlng = new google.maps.LatLng(75, -115);
var mymap = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://www.darkmatters.org/forums/bradstuff/Map/
MainMap/"+zoom+"_"+coord.x+"_"+coord.y+".jpg"; },
tileSize: new google.maps.Size(256, 256),
isPng: false
});
var map;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(75, -115));
map.setZoom(2);
map.setMapTypeId('roadmap');
map.overlayMapTypes.insertAt(0, mymap);
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#map_canvas {
width: 1000px;
height: 900px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="map_canvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
</body>
</html>
although it seems that I may be in a unique predicament in that
there's very little, if none, documentation on combining various
features. That or I'm dense which isn't all that unlikely, haha.
For starters...
With the help of William here at this forum I was able to complete the
brunt of my project which can be read here:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/5988e56946acad5e/b77e97ccb37989f0#b77e97ccb37989f0
Which helped me to implement a Google Map of my fave game:
http://www.google.com/url?sa=D&q=http://www.sacredwiki.org/index.php5/Sacred_2:Map_of_Ancaria
Now that the map is embeded there are two groups of markers I want to
place on the map. 89 markers which will be part of an "Employees"
group and another 30 markers which will be part of a "Bosses" group.
What I first need is a means to find out the numerical coord of the
points I wish to place the markers. For that I have been trying to
use "Draggable Markers" from the Google Maps V3 API Demo Gallery. To
no avail...
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
I desperately need help understanding how to code this. I've tried so
many variations of code and nothing I do will display both my custom
tiles map AND the drag-able marker. Any advice would be so very much
appreciated. Ii have next to no experience with javascript and I'm
having a heck of a time wrapping my head around it.
Below is my TestMap.html and the code contained within the html:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
<link href="standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script>
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this
location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Point A',
map: mymap,
draggable: true
});
var myLatlng = new google.maps.LatLng(75, -115);
var mymap = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://www.darkmatters.org/forums/bradstuff/Map/
MainMap/"+zoom+"_"+coord.x+"_"+coord.y+".jpg"; },
tileSize: new google.maps.Size(256, 256),
isPng: false
});
var map;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(75, -115));
map.setZoom(2);
map.setMapTypeId('roadmap');
map.overlayMapTypes.insertAt(0, mymap);
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#map_canvas {
width: 1000px;
height: 900px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="map_canvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
</body>
</html>
Rossko
Jul 19, 2010, 3:35:33 PM7/19/10
to Google Maps JavaScript API v3
> Below is my TestMap.html and the code contained within the html:
>
> http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
Code dump not needed, we can see the detail (and more reliably) at the
>
> http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
link you've provided.
I can't see anywhere you place any marker to be dragged about ?
Have another look at the source of
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
and see where a marker is added after the map is built.
You might need to explain if you want this map to allow the user to
place a single marker, or if you are expecting to place 120 markers
and have the user pick which one(s) to drag around.
I'm not sure why you have geocoder functions on your page, surely the
real-world addresses the geocoder uses aren't going to line up with
the fantasy map in any useful way? A lot of your fantasy land mass
corresponds to the Arctic ocean in the real world, not many addresses
there I suspect.
Brad C
Jul 19, 2010, 9:57:39 PM7/19/10
to Google Maps JavaScript API v3
Thanx for the reply Rossko and sorry for the dump. Thought it might
be more convenient for readers to look through than for readers to
load the linked page and then grab the source. It does make quite a
mess in my post though, hehe.
The marker to be placed I "think" is this bit of the code which is in
my html:
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
Though to be honest I'm no API whiz. Far from it in fact!
Just to be clear and as mentioned in my first post I'm using the
geocoder on my testmap so as to find the coords for the markers I want
to place. Once I have those I'll remove the geocoder and implement
the markers. Probably with an xml or kml if it's suitable.
Quote from first post:
"What I first need is a means to find out the numerical coord of the
points I wish to place the markers. For that I have been trying to
use "Draggable Markers" from the Google Maps V3 API Demo Gallery. To
no avail...
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/dr...
"
So all I'm trying to figure out at the moment is how to make the
draggable-marker reverse geocoder example work with my TestMap.
draggable-marker reverse geocoder example:
http://www.google.com/url?sa=D&q=http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html&usg=AFQjCNFfdFqXuhIOsnZ8Ykoid29JjxGYKA
My TestMap:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
I'm off to the drawing board. Wish me luck and if anyone discovers
something I'd be eager to read about it. :D
be more convenient for readers to look through than for readers to
load the linked page and then grab the source. It does make quite a
mess in my post though, hehe.
The marker to be placed I "think" is this bit of the code which is in
my html:
var marker = new google.maps.Marker({
title: 'Point A',
map: map,
draggable: true
});
Though to be honest I'm no API whiz. Far from it in fact!
Just to be clear and as mentioned in my first post I'm using the
geocoder on my testmap so as to find the coords for the markers I want
to place. Once I have those I'll remove the geocoder and implement
the markers. Probably with an xml or kml if it's suitable.
Quote from first post:
"What I first need is a means to find out the numerical coord of the
points I wish to place the markers. For that I have been trying to
use "Draggable Markers" from the Google Maps V3 API Demo Gallery. To
no avail...
"
So all I'm trying to figure out at the moment is how to make the
draggable-marker reverse geocoder example work with my TestMap.
draggable-marker reverse geocoder example:
http://www.google.com/url?sa=D&q=http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html&usg=AFQjCNFfdFqXuhIOsnZ8Ykoid29JjxGYKA
My TestMap:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
I'm off to the drawing board. Wish me luck and if anyone discovers
something I'd be eager to read about it. :D
geoco...@gmail.com
Jul 19, 2010, 10:37:41 PM7/19/10
to Google Maps JavaScript API v3
On Jul 19, 6:57 pm, Brad C <scho...@gmail.com> wrote:
> Thanx for the reply Rossko and sorry for the dump. Thought it might
> be more convenient for readers to look through than for readers to
> load the linked page and then grab the source. It does make quite a
> mess in my post though, hehe.
>
> The marker to be placed I "think" is this bit of the code which is in
> my html:
>
> var marker = new google.maps.Marker({
> position: latLng,
> title: 'Point A',
> map: map,
> draggable: true
> });
>
> Though to be honest I'm no API whiz. Far from it in fact!
>
> Just to be clear and as mentioned in my first post I'm using the
> geocoder on my testmap so as to find the coords for the markers I want
> to place. Once I have those I'll remove the geocoder and implement
> the markers. Probably with an xml or kml if it's suitable.
>
> Quote from first post:
>
> "What I first need is a means to find out the numerical coord of the
> points I wish to place the markers. For that I have been trying to
> use "Draggable Markers" from the Google Maps V3 API Demo Gallery. To
> no avail...http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/dr...
> Thanx for the reply Rossko and sorry for the dump. Thought it might
> be more convenient for readers to look through than for readers to
> load the linked page and then grab the source. It does make quite a
> mess in my post though, hehe.
>
> The marker to be placed I "think" is this bit of the code which is in
> my html:
>
> var marker = new google.maps.Marker({
> position: latLng,
> title: 'Point A',
> map: map,
> draggable: true
> });
>
> Though to be honest I'm no API whiz. Far from it in fact!
>
> Just to be clear and as mentioned in my first post I'm using the
> geocoder on my testmap so as to find the coords for the markers I want
> to place. Once I have those I'll remove the geocoder and implement
> the markers. Probably with an xml or kml if it's suitable.
>
> Quote from first post:
>
> "What I first need is a means to find out the numerical coord of the
> points I wish to place the markers. For that I have been trying to
> use "Draggable Markers" from the Google Maps V3 API Demo Gallery. To
> "
>
> So all I'm trying to figure out at the moment is how to make the
> draggable-marker reverse geocoder example work with my TestMap.
>
> draggable-marker reverse geocoder example:http://www.google.com/url?sa=D&q=http://gmaps-samples-v3.googlecode.c...
>
> So all I'm trying to figure out at the moment is how to make the
> draggable-marker reverse geocoder example work with my TestMap.
>
I (like Rossko), don't understand why you would want to use the
reverse geocoder for a custom map that doesn't map to the real world.
Why not just use a draggable marker and capture the coordinates that
you drag it to (update the infowindow when the drag ends)?
Why run them through the reverse geocoder? I think you can remove the
geocoder from your page.
You seem to have removed all the drag event handlers from your page,
which is probably counter productive.
-- Larry
Brad C
Jul 19, 2010, 11:30:15 PM7/19/10
to Google Maps JavaScript API v3
Cheers Larry. :)
Given that both you and Rossko are asking if I'm sure about my method
it must mean that I'm going about this the wrong way. I'm super super
new to this whole thing and I've likely chosen an overly complicated
method for my means.
Ah. I think I just got it... The Geocoder is just for finding the
place names of the world that is relative to the marker placement/
coords?
All I'm really needing is to figure out for example is the coords for
Scaron on my map. Scaron is near the top right of my map in big red
text with a red icon above. What I was planning was to use the
draggable marker example code as a way to drag the marker to the
different locations I want to mark on my map and copy the coords down
to make markers with.
Is the draggable marker example the best way for me to find coords on
my custom map or is there a better way? And if it is is there a
simple way of basically overlaying my custom tile map over the example
pages map?
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
http://www.darkmatters.org/forums/bradstuff/Map/S2IBmap.html
Thanx for the replies guys. I really do appreciate it.
Given that both you and Rossko are asking if I'm sure about my method
it must mean that I'm going about this the wrong way. I'm super super
new to this whole thing and I've likely chosen an overly complicated
method for my means.
Ah. I think I just got it... The Geocoder is just for finding the
place names of the world that is relative to the marker placement/
coords?
All I'm really needing is to figure out for example is the coords for
Scaron on my map. Scaron is near the top right of my map in big red
text with a red icon above. What I was planning was to use the
draggable marker example code as a way to drag the marker to the
different locations I want to mark on my map and copy the coords down
to make markers with.
Is the draggable marker example the best way for me to find coords on
my custom map or is there a better way? And if it is is there a
simple way of basically overlaying my custom tile map over the example
pages map?
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
http://www.darkmatters.org/forums/bradstuff/Map/S2IBmap.html
Thanx for the replies guys. I really do appreciate it.
geoco...@gmail.com
Jul 19, 2010, 11:43:51 PM7/19/10
to Google Maps JavaScript API v3
On Jul 19, 8:30 pm, Brad C <scho...@gmail.com> wrote:
> Cheers Larry. :)
>
> Given that both you and Rossko are asking if I'm sure about my method
> it must mean that I'm going about this the wrong way. I'm super super
> new to this whole thing and I've likely chosen an overly complicated
> method for my means.
> Ah. I think I just got it... The Geocoder is just for finding the
> place names of the world that is relative to the marker placement/
> coords?
That is what a reverse geocoder does. A geocoder finds coordinates
> Cheers Larry. :)
>
> Given that both you and Rossko are asking if I'm sure about my method
> it must mean that I'm going about this the wrong way. I'm super super
> new to this whole thing and I've likely chosen an overly complicated
> method for my means.
> Ah. I think I just got it... The Geocoder is just for finding the
> place names of the world that is relative to the marker placement/
> coords?
from an address.
>
> All I'm really needing is to figure out for example is the coords for
> Scaron on my map. Scaron is near the top right of my map in big red
> text with a red icon above. What I was planning was to use the
> draggable marker example code as a way to drag the marker to the
> different locations I want to mark on my map and copy the coords down
> to make markers with.
>
> Is the draggable marker example the best way for me to find coords on
> my custom map or is there a better way?
little more complicated than you need. All you really need is this
part of it:
http://www.geocodezip.com/v3_GoogleEx_draggable-markers_no-geocoder.html
> And if it is is there a
> simple way of basically overlaying my custom tile map over the example
> pages map?
-- Larry
>
> http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/dr...http://www.darkmatters.org/forums/bradstuff/Map/S2IBmap.html
Brad C
Jul 20, 2010, 10:49:19 PM7/20/10
to Google Maps JavaScript API v3
Ah thanx so much Larry. Your snippet really helped me to see what
code I need to work with. I've menaged to get the two different
functions, the marker and the map overlay, to function properly but
only individually... As soon as I try to combine the two in my html
it seems as though one cancels out the other. I've tried placing the
map overlay code in many different places within my html script but
the only way my custom map shows on top of the world map is if I place
my overlay code at the bottom within the <script> tags. Unfortunately
as soon as I get my custom map visible the marker is no longer
visible... I seem to have a conflict somewhere, somehow.
I've updated my test page to your suggestion and with my overlay code
at the bottom within the <script> tags. Any ideas where I'm going
wrong? I've been at this for several hours and I juts can't seem to
find a solution but I'll keep at it till I find one.
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
code I need to work with. I've menaged to get the two different
functions, the marker and the map overlay, to function properly but
only individually... As soon as I try to combine the two in my html
it seems as though one cancels out the other. I've tried placing the
map overlay code in many different places within my html script but
the only way my custom map shows on top of the world map is if I place
my overlay code at the bottom within the <script> tags. Unfortunately
as soon as I get my custom map visible the marker is no longer
visible... I seem to have a conflict somewhere, somehow.
I've updated my test page to your suggestion and with my overlay code
at the bottom within the <script> tags. Any ideas where I'm going
wrong? I've been at this for several hours and I juts can't seem to
find a solution but I'll keep at it till I find one.
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
William
Jul 20, 2010, 11:09:21 PM7/20/10
to Google Maps JavaScript API v3
On Jul 21, 12:49 pm, Brad C <scho...@gmail.com> wrote:
>
> http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
>
there's two functions called initialize(), so you need to combine
them.
>
> http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
>
there's two functions called initialize(), so you need to combine
them.
Brad C
Jul 21, 2010, 1:37:16 PM7/21/10
to Google Maps JavaScript API v3
Woohoo! Thanx William. After much fiddling I managed to combine them
as you suggested and things are starting to come along nicely. Even
using my own icons. *feels proud*
I don't suppose anyone can tell me why my map is in duplicate on my
test page? You'll see that if you drag the whole map, without zooming
in, that there is an underlying duplicate of my map. Although the
functionality I was looking for is finally achieved I'd still like to
know how/why I have a duplicate of the map.
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
P.s.
Is there some sort of code widget thing I could add to my test map
that will help me generate marker code intended for xml? As it is
I'll have to copy paste each set of coords which I like to avoid if
possible.
P.p.s.
The help I've gotten in this discussion and my previous is
phenomenal. I think I'm loving Google Groups. :D Thanx all!
as you suggested and things are starting to come along nicely. Even
using my own icons. *feels proud*
I don't suppose anyone can tell me why my map is in duplicate on my
test page? You'll see that if you drag the whole map, without zooming
in, that there is an underlying duplicate of my map. Although the
functionality I was looking for is finally achieved I'd still like to
know how/why I have a duplicate of the map.
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
P.s.
Is there some sort of code widget thing I could add to my test map
that will help me generate marker code intended for xml? As it is
I'll have to copy paste each set of coords which I like to avoid if
possible.
P.p.s.
The help I've gotten in this discussion and my previous is
phenomenal. I think I'm loving Google Groups. :D Thanx all!
William .
Jul 21, 2010, 7:30:49 PM7/21/10
to google-map...@googlegroups.com
maybe the map is duplicate because there's two calls to the initialize() function? Try with just the one in the <body> tag and see what happens ...
google.maps.event.addDomListener(window, 'load', initialize);
and
<body style="background:#BFD0FF;" onload="initialize()">
...
Brad C
Aug 3, 2010, 10:40:07 PM8/3/10
to Google Maps JavaScript API v3
That worked perfectly William. Thank you very much for this and the
other advice! :)
After much fiddling around my map is starting to take shape:
http://www.darkmatters.org/Map/TestMap2.html
I've got loads more questions but I think it might be time to move on
from this discussion to create a new one with a title more relevant to
my next question.
Cheers!
other advice! :)
After much fiddling around my map is starting to take shape:
http://www.darkmatters.org/Map/TestMap2.html
I've got loads more questions but I think it might be time to move on
from this discussion to create a new one with a title more relevant to
my next question.
Cheers!
Reply all
Reply to author
Forward
0 new messages