Invalid value for property <position>
I am trying to combine perl and Javascript to map the Lat / Long IP addresses of places on a Google map using the Google Maps v3 API. I return to the marker, I get the error message: Uncaught Error: Invalid value for property <position>: 43.073052,-89.40123
My code is:
#!/usr/bin/perl -w use CGI qw(:standard); use CGI::Carp qw/fatalsToBrowser warningsToBrowser/; use CGI::Session ( '-ip_match'); use SOAP::Lite; use lib '/home/schreiber/perl5/lib/perl5'; use JSON qw(encode_json); $session = CGI::Session->load(); $q = new CGI; my $soap = SOAP::Lite -> uri('http://v1.fraudlabs.com/') -> proxy('http://v1.fraudlabs.com/ip2locationwebservice.asmx') -> on_action(sub { join "/", "http://v1.fraudlabs.com", $_[1] }); $license = "<removed>"; #if($session->is_expired) { # print $q->header(-cache_control=>"no-cache, no-store, must-revalidate"); # print "Your session has expired. Please login again."; # print "<br/><a href=\"../login.html\">Login</a>"; #} elsif($session->is_empty) { # print $q->header(-cache_control=>"no-cache, no-store, must-revalidate"); # print "You have not logged in"; #} else { print $q->header(-cache_control=>"no-cache, no-store, must-revalidate"); open (IPF, "/home/access_log"); @incomingarray=<IPF>; $i = 0; foreach $pair(@incomingarray) { ($ip, $rest) = split(/ - - /, $pair); $incomingarray[$i] = $ip; chomp $ip; $i++; } close (IPF); my %hash = map { $_, 1 } @incomingarray; my @distinctIP = keys %hash; $j = 0; my @iplocation; foreach (@distinctIP) { my $method = SOAP::Data->name('IP2Location')->attr({xmlns => 'http://v1.fraudlabs.com/' }); my @params = SOAP::Data->name('inputdata' => \SOAP::Data->value( SOAP::Data->name(IP=>$_), SOAP::Data->name(LICENSE=>$license) )); my $result = $soap->call($method => @params); $lat = $result->valueof('//LATITUDE'); $long = $result->valueof('//LONGITUDE'); push(@iplocation, "$lat,$long"); } my $json = encode_json(\@iplocation); # print "Content-Type: text/html\n\n"; print '<html> <head> <script type="text/javascript"> function initialize() { var myOptions = { zoom: 8, center: new google.maps.LatLng(44.49, -91.30), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(\'map_canvas\'), myOptions); var coord_data = new Array(); coord_data = '.$json.'; var marker; for (var i = 1; i < coord_data.length; i++) { console.log(coord_data[i]); var marker = new google.maps.Marker({ position: new google.maps.LatLng(coord_data[i]), map:map }); marker.setMap(map); } } function loadScript() { var script = document.createElement(\'script\'); script.type = \'text/javascript\'; script.src = \'//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize\'; document.body.appendChild(script); } window.onload = loadScript; </script> </head> <body> <div id="map_canvas" style="width: 100%; height: 100%"></div> </body> </html> '; #}
Any help would be greatly appreciated.
+6
1 answer
The problem is that when you assign a position here -
marker = new google.maps.Marker({ position:coord_data[i], map:map });
- you give it a raw JSON object, but it expects a google.maps.LatLng object. You will want to assign it like this:
position: new google.maps.LatLng(coord_data[i].lon,coord_data[i].lat)
See also examples of good examples of using the Gmaps API: https://developers.google.com/maps/documentation/javascript/v2/examples/
+10