Google Maps API

  • I wanted to make some code available for someone to improve on…

    I have a wordpress site where I aggregate regional news. When Google Maps API code became available I was eager to try to incorporate it into my site which is what I did earlier this summer. I have a category called “Regional News” and I put embedded a news map into the archive page.

    This requires the GEO plugin as well as a valid Google Maps API key for the webpage of course. Here’s the code:

    <?php get_header(); ?>
    <script src=”https://maps.google.com/maps?file=api&v=1&key=%5Byour site google maps api key]” type=”text/javascript”></script>

    <div id=”content” class=”narrowcolumn”>

    <h3>News Map</h3>
    <div id=”map” style=”width: 400px; height: 400px”></div>

    <script type=”text/javascript”>

    //<![CDATA[
    // Creates a marker whose info window displays the given number
    function createMarker(point, text) {
    var marker = new GMarker(point);

    // Show this marker’s index in the info window when it is clicked
    var html = text;
    GEvent.addListener(marker, “click”, function() {
    marker.openInfoWindowHtml(html);
    });

    return marker;
    }
    function markerClicked(marker,html)
    {
    if((map.infoWindow)&&map.infoWindow.isVisible())
    {
    map.closeInfoWindow();
    }
    else
    marker.openInfoWindowHtml(html);
    }

    var panel = document.getElementById(‘panel’);
    var CategoryCurr = “”;
    var CategoryNew = “”;
    var html = “”;

    var map = new GMap(document.getElementById(“map”));

    map.addControl(new GSmallMapControl());

    map.addControl(new GMapTypeControl());

    map.centerAndZoom(new GPoint(-76.112672, 43.065321), 9);
    </script>
    <?php while (have_posts()) : the_post(); ?>
    <?php if ( !(in_category(’22’)) ) { ?>
    <?php $lon = get_lon(); ?>
    <?php $lat = get_lat(); ?>
    <?php $info1 = “
    <?php $link = get_permalink() ?>
    <?php $title = the_title(”,”,false); ?>
    <?php $postdate = get_the_time(‘m/j/y’) ?>
    <?php
    $postdata = $wpdb->get_row(“SELECT post_excerpt FROM wp_posts WHERE id = $id”);
    ?>

    <script type=”text/javascript”>
    var point = new GPoint(<?php echo $lon; ?>,<?php echo $lat; ?>);
    var post_html = “<small><b>Date: ” + ‘<?php echo $postdate; ?>’+ “</b></small><br><b>”+”‘ + “‘> ” +
    ‘<?php echo $title; ?>’+ “    </b><br>” + ‘<?php echo $postdata->post_excerpt; ?>’;
    var marker = createMarker(point, post_html);
    map.addOverlay(marker);
    </script>
    <?php } ?> <!– Close the if statement. –>
    <?php endwhile; ?>
    <?php rewind_posts(); ?>

Viewing 8 replies - 1 through 8 (of 8 total)

  • fantastic!

    Ive been working on something similar and will use your code probably ??

    a similar attempt is below, but the author went on vacation so it seems to be in a standstill

    also see:
    https://www.ads-software.com/support/topic/44123
    and
    https://www.sublimity.ca/2005/09/01/travelog/

    Doesn’t look like the code as posted would work. Might want to post it in pastebin.com

    Thread Starter azumone

    (@azumone)

    Sorry, the statement in the above code:

    <?php $info1 = "

    is unneccessary and wasn’t pasting through correctly.

    The basic idea is to pass the PHP variables to the API java script that posts to the Google Map.

    In the above code the first snippet of java just needs to be before The Loop:

    ‘<?php if ( !(in_category(’22’)) ) { ?>
    <?php $lon = get_lon(); ?>
    <?php $lat = get_lat(); ?>
    <?php $link = get_permalink() ?>
    <?php $title = the_title(”,”,false); ?>
    <?php $postdate = get_the_time(‘m/j/y’) ?>
    <?php
    $postdata = $wpdb->get_row(“SELECT post_excerpt FROM wp_posts WHERE id = $id”);
    ?>’

    Thread Starter azumone

    (@azumone)

    This is where I’m having trouble posting to the forum again. I apologize for these re-edits. But the combination of PHP, javascript, and HTML is not being displayed correctly between backticks (or I’m not being carful enough:
    After this
    ‘<?php
    $postdata = $wpdb->get_row(“SELECT post_excerpt FROM wp_posts WHERE id = $id”);
    ?>

    <script type=”text/javascript”>’

    comes this,

    ‘var point = new GPoint(<?php echo $lon; ?>,<?php echo $lat; ?>);’

    followed by the ‘var post_html =’ which builds your html displayed in the overlay callout. This code doesn’t display well between backticks:

    ‘var post_html = “<small><b>Date: ” + ‘<?php echo $postdate; ?>’+ “</b></small><br><b>”+
    ‘”<a href=”’

    +'<?php echo $link; ?>’ + “‘> ” +

    ‘<?php echo $title; ?>’+
    “</closing the a href with an a ></b><br>”+ ‘<?php echo $postdata->post_excerpt; ?>’;

    And then finally:

    var marker = createMarker(point, post_html);
    map.addOverlay(marker);
    </script>
    <?php } ?> <!– Close the if statement. –>’

    This has been the real kicker; trying to display post data in display windows. Hopefully someone out there comes up with some cleaner code….?

    nessievl

    (@nessievl)

    I tried your script, but I can’t seem to figure out why it isnt working in IE.

    https://uncannyvalley.org/uv/

    nessievl

    (@nessievl)

    I think the while loop is throwing me because i cant put it in the header like the rest of the javascript. I’m stumped

    nessievl

    (@nessievl)

    nm, got it now

    Here I’ll teach the simplest way to embed google maps on your postings:
    https://hackspot.gotdns.com/blog/archives/42/embedding-google-map-in-wordpress-posts/

    You can see the example here:
    https://hackspot.gotdns.com/blog/archives/18/inline-google-map-for-wordpress/

    Features:
    * easy, easy, easy to use
    * support for setting overlay maps, map types, etc..
    * unlimited number of maps on single page
    * one marker per map
    * support for English and Japanese map captions (on map buttons)
    * uses Google Maps API v.2

    You can find the author of the plugin here:
    https://www.macdiggs.com/index.php/2006/09/08/inline-google-maps-for-wordpress/

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Google Maps API’ is closed to new replies.