Adding a JSON array for styled google maps to php?

Question

I feel really bad asking this question. If what I'm trying to do isn't possible, please advise.

I'm a graphic/web design student and so far only good at html. I'm using a google maps component and would like to style the maps using the API wizard. As Follows: http://pastebin.com/YsKbyS58

Problem is examples use static html and the component is php based: http://pastebin.com/XrEMmTVJ

Can I inject the JSON array into the PHP file? What would the syntax be like?

Thank you!

jbrtrnd · Accepted Answer · 2012-06-01 15:27:48Z

1

Google maps syntax for styling the map is like (with your php script) :

// Map creation
        var map = new google.maps.Map(document.getElementById('contentmap_<?php echo $owner; ?>_<?php echo $id; ?>'),
        {
                zoom: <?php echo $this->Params->get("zoom", 0); ?>,
                center: center,
                mapTypeId: google.maps.MapTypeId.<?php echo $this->Params->get("map_type", "ROADMAP"); ?>,
                styles : [
                    {
                     elementType: "geometry",
                     stylers: [
                          { visibility: "on" },
                          { hue: "#ff8800" }
                     ]
                    },{
                     elementType: "labels",
                     stylers: [
                           { hue: "#ffc300" }
                     ]
                    }
                ]
             });

edited Jun 1, 2012 at 15:27

answered Jun 1, 2012 at 14:49

jbrtrnd

3,8435 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

beanaroo Over a year ago

Thanks for the quick response, unfortunately this breaks the map. (just white). Something must be conflicting somewhere.

jbrtrnd Over a year ago

Hum I miss a , before the styles key. I've edited my post.

beanaroo Over a year ago

AH! I did the same mistake, thank you. still no change though

beanaroo Over a year ago

Corrected another syntax fault on my side (stylez instead of styles) Thank you so much!

Heitor Chang · Accepted Answer · 2012-06-01 14:49:25Z

0

What I understood is that you want to apply those styles to your map? Since what you have posted is really just a static object, you can insert it right into your map options:

var map = new google.maps.Map(document.getElementById('contentmap_<?php echo $owner; ?>_<?php echo $id; ?>'),
    {
        zoom: <?php echo $this->Params->get("zoom", 0); ?>,
        center: center,
        mapTypeId: google.maps.MapTypeId.<?php echo $this->Params->get("map_type", "ROADMAP"); ?>,
            styles:  [ 
                       { 
                         elementType: "geometry",
                         stylers: [
                           { visibility: "on" },
                           { hue: "#ff8800" }
                         ] 
                       },{ 
                         elementType: "labels",
                         stylers: [
                           { hue: "#ffc300" }
                         ] 
                       } 
                     ]
    });

If you mean to make the styles dynamic the PHP tags can replace the values inside the styles objects too.

answered Jun 1, 2012 at 14:49

Heitor Chang

6,0573 gold badges50 silver badges67 bronze badges

4 Comments

beanaroo Over a year ago

Thank you! Unfortunately the map stops working. Maybe a conflict with the rest of the component. (NEVER MIND, silly syntax error) No difference in styling though.

Heitor Chang Over a year ago

No, it must be my fault then. Let me see and try to fix it.

beanaroo Over a year ago

Found the problem. I used stylez instead of styles. SOLUTION WORKS! wish I could tick two answers as correct :) Thank you, Heitor

Heitor Chang Over a year ago

Good luck with your project :)

Collectives™ on Stack Overflow

Adding a JSON array for styled google maps to php?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related