Re: [Neo4j] Visualize Data in Google Maps

[Michael Hunger]

I'm vary about setting javascript variables by php echo :)

Wouldn't it make more sense to retrieve them from the server via a ajax request in javascript?

I think it is just a quoting/escaping problem. I assume it works when you use static values there.

Michael

Am 21.08.2012 um 21:34 schrieb Shad King:

> I am somewhat new to the NEO4J community and have been assigned a task of implementing Google Maps within our project. As of right now I have been able to create the map and populate it using the standard markers. Basically what I want to do is take the Nodes that we have created and display them on the map ( which I have done). Then I want to draw lines between them similar to what Google Maps offers as flight paths. and last I want to be able to take the node icon that the user uploaded to the database and display that as the marker.
>
> Where I am running into the problem is that when I declare my image as var image = "<?php echo $entity_icon?>"; then my map breaks. I am doing it the same way that I did when I called the address from the database and that works.
>
> Below is the complete Java script
>
> <script type="text/javascript">
>
> var infowindow = new google.maps.InfoWindow();
> var browserSupportFlag = new Boolean();
>
>
>
> function initialize()
> {
> var latlng = new google.maps.LatLng(38.9550040,-77.4045560);
> var settings =
>
>
> //sets the settings of the map
>
> {
> zoom: 5,
> center: latlng,
> mapTypeControl: true,
> mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
> navigationControl: true,
> mapTypeId: google.maps.MapTypeId.ROADMAP
> }
>
> geocoder = new google.maps.Geocoder();
> map = new google.maps.Map(document.getElementById("map_canvas"), settings);
>
> // Try W3C Geolocation (Preferred)
>
> if(navigator.geolocation)
> {
> browserSupportFlag = true;
> navigator.geolocation.getCurrentPosition(function(position)
>
> {
> initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
> map.setCenter(initialLocation);
> }, function()
>
> {
> handleNoGeolocation(browserSupportFlag);
> });
> }
>
> // Browser doesn't support Geolocation
>
> else
> {
> browserSupportFlag = false;
> handleNoGeolocation(browserSupportFlag);
> }
>
>
>
> function handleNoGeolocation(errorFlag)
> {
> if (errorFlag == true)
>
> {
> alert("Geolocation service failed.");
> initialLocation = Virgina;
> }
> else
> {
> alert("Your browser doesn't support geolocation. We've placed you in here.");
> initialLocation = '';
> }
> map.setCenter(initialLocation);
> }
> }
>
>
>
> // Takes an address and places a marker in google maps
>
> function codeAddress()
>
> {
> var address = "<?php echo $node_address?>";
> var description = "<?php echo $node_title?>";
> var properties = "<?php echo $default_properties?>"
> <?php
> $js_array = json_encode($end_node_addresses);
> echo "var end_addresses = ". $js_array . ";\n";
> ?>
>
>
> var image = "<?php echo $entity_icon?>";
>
> geocoder.geocode( { 'address': address}, function(results, status)
> {
> if (status == google.maps.GeocoderStatus.OK)
> {
> map.setCenter(results[0].geometry.location);
>
> var contentString = '<div id="contentmarker">'+
> '<div id="siteNotice">'+
> '</div>'+
> '<h2 id="firstHeading" class="firstHeading"><?php echo $node_title?></h2>'+
> '<div id="bodyContent">'+
> '<p> Is located in <b><?php echo $node_address?><?php echo $default_properties?></b> <b></b></p>'+
> '</div>'+
> '</div>';
>
> var infowindow = new google.maps.InfoWindow(
> {
> content: contentString
> });
>
>
> var marker = new google.maps.Marker({
> map: map,
> position: results[0].geometry.location,
> icon: image,
> title: address
> });
>
> google.maps.event.addListener(marker, 'click', function() {
> infowindow.open(map,marker);
> });
> }
>
> else
> {
> alert("Geocode was not successful for the following reason: " + status);
> }
> });
>
> var title_vars = end_addresses;
>
> for (i = 0; i < end_addresses.length; i++)
> {
> geocoder.geocode( { 'address': end_addresses[i]}, function(results, status)
> {
> if (status == google.maps.GeocoderStatus.OK)
> {
> map.setCenter(results[0].geometry.location);
>
> var contentString = '<div id="contentmarker">'+
> '<div id="siteNotice">'+
> '</div>'+
> '<h2 id="firstHeading" class="firstHeading"><?php echo $node_title?></h2>'+
> '<div id="bodyContent">'+
> '<p> Is located in <?php echo end_addresses?></p>'+
> '</div>'+
> '</div>';
>
> var infowindow = new google.maps.InfoWindow({
> content: contentString
> });
>
> var marker = new google.maps.Marker({
> map: map,
> position: results[0].geometry.location,
> title: title_vars.shift(),
> });
> google.maps.event.addListener(marker, 'click', function() {
> infowindow.open(map,marker);
> });
> }
>
> else
> {
> alert("Geocode was not successful for the following reason: " + status);
> }
> });
> }
> }
> </script>
>
> --
>
>

[Shad King]

I am very new to this. May be 6 months old and all self taught, where would I find documentation on where to do that?

--

[Michael Hunger]

For javascript and ajax ? Perhaps use jquery $.ajax("/location", { "type": "GET" , "success": function(data) {....}}} see http://api.jquery.com/jQuery.ajax/

What about my question if it works with static values? And what is the content of the properties you want to show? Is it visible somewhere?

HTH

Michael

--
 
 

[Gil Hildebrand]

Congratulations on your progress in learning to code.

When you view source on the page, what do you see on the var image line? 

Does it just say var image=""? If so, perhaps the variable does not exist in PHP.

You do not need to use Ajax to populate the variable. The way you are doing it (using PHP) is perfectly acceptable.

[Shad King]

Sorry it is taking me a little bit to respond. When I view the source I am getting this error code in the place of the the Var image""

<h4>A PHP Error was encountered</h4>
	<p>Severity: Notice</p>
	<p>Message: $entity_icon is an undefined variable</p>
	<p>Filename: core/Loader.php</p>
From my understanding is not that what I am doing	<p>Line Number: 833</p> on this line?    var image = "<?php echo $entity_icon?>";

Because when I do it right here it works. for the address, description and end_node addresses just not the properties and image? 

function codeAddress() 

{     

var address = "<?php echo $node_address?>";

var description = "<?php echo $node_title?>";

var properties = "<?php echo $default_properties?>"

<?php

$js_array = json_encode($end_node_addresses);

echo "var end_addresses = ". $js_array . ";\n";

?>

--
 
 

[Gil Hildebrand]

On that line you're trying to define a javascript variable called image. You have to have a corresponding $entity_icon variable that already exists. It looks like $entity_icon is not defined in the view file of your PHP app. 

This is more of a PHP problem than a Neo problem. I'm afraid it's difficult to debug without seeing the whole application. 

You might not even need to specify an image for the map. Have you tried just removing that line?

--
 
 

--

Gil Hildebrand

All About Gil

Visit my blogs: Tech and Travel