Hiding markers - marker object vs. array holding marker attributes

276 views
Skip to first unread message

Ricktig

unread,
Feb 9, 2012, 4:02:11 PM2/9/12
to google-map...@googlegroups.com
I'm having difficulty understanding the relationship between adding a marker to a map object and creating an array/object that holds the marker's attributes.  I'm developing a JavaScript page that will allow users to toggle three types of markers.  The data is obtained from a getjson jQuery call which returns a properly formed JSON object.  I parse through the JSON object with $.each and add the markers to the map.  I'm having difficulty assigning the same JSON object or each element from that object to the second array which holds the map attributes used to hide the markers. 

I've attempted to assign the JSON object to an array and then use that to hide the markers but run into difficulty creating a multidimensional associative array in JavaScript.  The array fills but this is not what the Maps API is expecting and generates [Object][Object] as the result.

I'm pretty new to Maps and JavaScript and can't see what this bridge step between the JSON object and the expected Maps format should be.

Any help is appreciated.

Thanks!

Rossko

unread,
Feb 9, 2012, 6:37:07 PM2/9/12
to Google Maps JavaScript API v3
What many folk would do is to create a marker object in the usual way,
and then assign your custom data directly to it
var marker = new google.maps.Marker(...
marker.mySpecialAttribute = ...
you can then store an array of markers in the usual way, for easy and
direct manipulation.

If you have buckets of data, you could keep that in a seperate array
and store an index into the array on the marker proper. Perhaps you
already have a unique ID in your data.

Ricktig

unread,
Feb 10, 2012, 2:38:16 PM2/10/12
to Google Maps JavaScript API v3
Thanks for the response.

I'm still a bit confused as to the relationship between the marker
objects and the second object which allows for the markers to be
hidden.

I assign the JSON object to a JavaScript variable/object statically
via a long string of JSON (var = [{"name":"Site1",
"long":"-105.0"...);. I'd like to be able to parse the JSON object
returned via the $.getJSON jQuery function and create that same string
dynamically but am having trouble bridging between the object returned
from the jQuery call and the variable assignment.

Here's the code that I'm struggling with:

<script type="text/javascript">
//assign url to php files to query database and build json arrays
var camurl="buildcamjson.php";

//create arrays to hold marker objects for cams, public cgs and
private cgs
var cammarkerarray = [];
var camattributearray = [];

//Get JSON object
$.getJSON(camurl,function(json)
{
//loop through each json object and return primary key and site
object creating a marker attribute for each object
$.each(json.campgrounds,function(i,cam)
{
//ASSIGN JSON OBJECTS TO VARIABLE HERE
}); //end $.each loop
}); // end $.getJSON function
//create array to hold public cg marker attributes
</script>

Here's the functional module with the long string statically entered
which works fine but is very poor technique:

$(function()
{
//create new roadmap object in map div centered on Colorado at zoom
level 8
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 8,
center: new google.maps.LatLng(39.0, -105.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
}); // end map block

//create new infowindow object
var infowindow = new google.maps.InfoWindow();

//assign url to php files to query database and build json arrays
var camurl="buildcamjson.php";
var publiccgurl = "buildpubliccgurl.php";
var privatecgurl = "buildprivatecgurl.php";

//create arrays to hold marker objects for cams, public cgs and
private cgs
var cammarkerarray = [];
var publiccgmarkerarray = [];
var privatecgmarkerarray = [];

//create array to hold cam marker attributes
var camattributearray = [{ "pkID":"1", "name":"CDOTJulesburgNorth",
"city":"Julesburg", "state":"CO", "longitude":"-102.247269",
"latitude":"40.967636", "operator":"CDOT", "url":"http://
www.cotrip.org/images/ws/camera?imageURL=72"}, three hundred
additional elements...
}];

Any help is appreciated!

Thanks!

Rick

Dee A. Phipps

unread,
Feb 10, 2012, 4:20:13 PM2/10/12
to google-map...@googlegroups.com
My form is at:

http://jnditech.com/TNSR/contact-form.php

What I need to do is redraw the map on the third step to reflect the
neighborhoods near the 'employer' that was autocompleted on the first step
in order for it to give the neighborhood priorities based on proximity.

So, I think I need to "gather" the address information from the auto
complete field & redraw the map for the neighborhood area.

Any clues the best way to do this? Every time I try to redraw the map with
new variables, nothing appears whatsoever.

Thank you in advance.

Dee


Reply all
Reply to author
Forward
0 new messages