Reputation: 1921
I have a PHP array in the form below, I am trying to plot these on a Google Map (v3) in my website, but wondered the best way to create the code for the markers. An example of some working code is below that I have tested hardcoded.
I could create a loop that made the list, however I would have to check to remove the last comma otherwise the Javascript would be invalid and feel this is rather hacky and prob not the best way to do it, I was thinking instead there would be something I am overlooking that will allow me to pass in an array and tell it what keys to use to create the Javascript, all properly formatted?
Example Array
Array (
[0] => Array (
[propertyId] => 1603
[address1] => 1 Anystreet
[address2] =>
[address3] =>
[town] => London: City
[postcode] => AB1 3DE
[sizeTotalSqM] => 906.18
[sizeTotalSqF] => 9754.00
[lat] => 51.5245029
[lng] => -0.1120882
[distance] => 0.00461191366463175
[distanceMeters] => 0.512207377367013
[description] => HTML description to go in here
[imageUrl] => http://rackcdn.com/properties/o/1603-1.jpg
[agentArray] => a:2:{i:0;a:6:{s:11:"agentUserId";s:2:"91";s:18:"agentUserFirstname";s:7:"Paul";s:16:"agentUserSurname";s:6:"Smith";s:18:"agentUserTelephone";s:20:"020 1 234 5678";s:9:"agentName";s:11:"The Agency";s:9:"agentLogo";s:15:"the-agency.png";}i:1;a:6:{s:11:"agentUserId";s:3:"144";s:18:"agentUserFirstname";s:6:"Rupert";s:16:"agentUserSurname";s:7:"Perkins";s:18:"agentUserTelephone";s:20:"020 1 234 5678";s:9:"agentName";s:11:"The Agency";s:9:"agentLogo";s:15:"the-agency.png";}}
)
[1] => Array (
[propertyId] => 505
[address1] => 2 Anystreet
[address2] =>
[address3] =>
[town] => London: City
[postcode] => AB2 3CD
[sizeTotalSqM] => 916.30
[sizeTotalSqF] => 9863.00
[lat] => 51.5189016
[lng] => -0.1027654
[distance] => 0.00908959843557461
[distanceMeters] => 0.634894510451541
[description] => Another description
[imageUrl] => image-coming.png
[agentArray] => a:3:{i:0;a:6:{s:11:"agentUserId";s:2:"91";s:18:"agentUserFirstname";s:7:"Paul";s:16:"agentUserSurname";s:6:"Smith";s:18:"agentUserTelephone";s:20:"020 1 234 5678";s:9:"agentName";s:11:"The Agency";s:9:"agentLogo";s:15:"the-agency.png";}i:1;a:6:{s:11:"agentUserId";s:1:"5";s:18:"agentUserFirstname";s:5:"David";s:16:"agentUserSurname";s:7:"Beckham";s:18:"agentUserTelephone";s:20:"020 1 234 5678";s:9:"agentName";s:11:"The Agency";s:9:"agentLogo";s:15:"the-agency.png";}i:2;a:6:{s:11:"agentUserId";s:2:"80";s:18:"agentUserFirstname";s:4:"Mark";s:16:"agentUserSurname";s:6:"Bourne";s:18:"agentUserTelephone";s:20:"020 1 234 5678";s:9:"agentName";s:11:"The Agency";s:9:"agentLogo";s:15:"the-agency.png";}}
)
[2] => Array (
[propertyId] => 506
[address1] => 45 Any Road
[address2] => Aldwych
[address3] =>
[town] => n/a
[postcode] => AB3 2RF
[sizeTotalSqM] => 562.90
[sizeTotalSqF] => 6059.00
[lat] => 51.5189016
[lng] => -0.1027654
[distance] => 0.00908959843557461
[distanceMeters] => 0.634894510451541
[description] => Another description.
[imageUrl] => http://rackcdn.com/properties/o/506-1.jpg
[agentArray] => a:2:{i:0;a:6:{s:11:"agentUserId";s:1:"9";s:18:"agentUserFirstname";s:5:"Colin";s:16:"agentUserSurname";s:4:"Braddy";s:18:"agentUserTelephone";s:20:"020 1 234 5678";s:9:"agentName";s:11:"The Agency";s:9:"agentLogo";s:15:"the-agency.png";}i:1;a:6:{s:11:"agentUserId";s:3:"107";s:18:"agentUserFirstname";s:7:"Richard";s:16:"agentUserSurname";s:6:"Head";s:18:"agentUserTelephone";s:20:"020 1 234 5678";s:9:"agentName";s:11:"The Agency";s:9:"agentLogo";s:15:"the-agency.png";}}
)
)
Hard coded Javascript code for Google Maps - uses address1, lat and lng from array. In future might want to add more
var properties = [
['1 Anystreet', 51.5245029, -0.1120882],
['2 Anystreet', 51.5189016, -0.1027654],
['45 Any Road', 51.5189016, -0.1027654]
];
Upvotes: 0
Views: 2620
Reputation: 152206
I always use the following solution and it allways worked. ;)
In view:
<script type="text/javascript">
var properties = [
<?php
$count = count($data);
for ( $i = 1; i <= count; ++$i ) {
$lat = str_replace(',', '.', $data['lat']);
$lng = str_replace(',', '.', $data['lng']);
echo '["' . $data['address1'] . '", ' . $lat . ',' . $lng . ']';
if ( $i < $count ) {
echo ',';
}
}
?>
];
</script>
Upvotes: 0
Reputation: 9433
You can manipulate your PHP array to mimic what the Google Maps API requires:
Array (
[0] => Array (
[address1] => 1 Anystreet London
[lat] => 51.5245029
[lng] => -0.1120882
)
[1] => ...
)
To make it JavaScript readable just echo it json encoded:
<script type="text/javascript">
var locations = <?php echo json_encode($locations_array); ?>;
</script>
This avoids the need for any character escaping, removing trailing commas, inserting square brackets etc.
This has the added advantage of keeping your data keyed too so you can access your data as follows using JavaScript:
for(i in locations)
{
var address1 = locations[i].address1;
var lat = locations[i].lat;
var lng = locations[i].lng;
// use address1, lat, lng however you like
}
Upvotes: 1