phpwordpressgoogle-mapsgoogle-maps-markersinfowindow

Adding Hyperlinks to Infowindow using GMaps


I'm using Wordpress, and am successful at displaying a map on my site with multiple markers using GMaps. Unfortunately, I was hoping to have the "location name" hyperlinked to the relevant post on my site. For some reason though, I can't add a hyperlink to the infowindow without crashing the whole map.

Below is the functioning code, as soon as I remove the strip_tags(); function the map no longer displays. I'm guessing it's related to having too many ", but I can't figure out how to get it working.

    $str = '';
    foreach($loop as $p){
    //get the meta and taxonomy data
    $name = strip_tags(get_the_term_list($p, "mountains"));
    $wtr_long = get_post_meta($p,"wtr_longitude",true);
    $wtr_lat = get_post_meta($p,"wtr_latitude",true);

    //Add to Array
    $map_string .= '{latitude: "' . $wtr_lat . '", longitude: "' . $wtr_long . '", html: "' . $name .'"},~!~';
    //$map_string .= '{latitude: "' . $wtr_lat . '", longitude: "' . $wtr_long . '", html: "name"},~!~';
    }

    //Remove last three "~!~" characters from the string not to have one too many arrays when exploding
    $clean_map_string = substr($map_string, 0, -3); 

    //Now I can use explode on ~!~ to get arrays with my string
    $map_array = explode('~!~', $clean_map_string);
    ?>                        




    <!--Map implementation-->
<div id="map" style="width:880px; height: 600px; background-color:grey;"></div>

<script type="text/JavaScript">                                                     
      $("#map").gMap({
                      scrollwheel: false,
                      maptype: G_PHYSICAL_MAP,
                      markers: [
<?php
    $i = 0;
    $length = count($map_array)-1;

//Inserts all the markers
    foreach($map_array as $value){
        if( $i != $length ){
            echo $value;
                            }
        else {
            echo str_replace("},", "}],", $value);
            }
            $i++;
                                }   
    ?>

                      popup: false,
                      zoom: 2 });             
   </script>

Solution

  • InfoWindows usually have no problems with tags. You are trying to create a JSON-string there, use json_encode() instead of this mixture of string-functions to avoid invalid characters inside the string.

    <?php
        $markers=array();
        foreach($loop as $p){
    
          $markers[]=array(
                            'latitude'  =>  get_post_meta($p,"wtr_latitude",true),
                            'longitude' =>  get_post_meta($p,"wtr_longitude",true),
                            'html'      =>  get_the_term_list($p, "mountains")
                          ); 
        } 
    
    ?> 
    <!--Map implementation-->
    <div id="map" style="width:880px; height: 600px; background-color:grey;"></div>
    
    <script type="text/JavaScript">                                                     
          $("#map").gMap({
                          scrollwheel: false,
                          maptype: G_PHYSICAL_MAP,
                          markers: <?php echo json_encode($markers);?>,
                          popup: false,
                          zoom: 2 });             
    </script>