Title: Google Maps API
Last modified: August 18, 2016

---

# Google Maps API

 *  [azumone](https://wordpress.org/support/users/azumone/)
 * (@azumone)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/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”](http://www.blog.ecocny.com/archives/category/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=”[http://maps.google.com/maps?file=api&v=1&key=%5Byour](http://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)

 *  [allotherplaces](https://wordpress.org/support/users/allotherplaces/)
 * (@allotherplaces)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273566)
 * 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:
    [http://wordpress.org/support/topic/44123](http://wordpress.org/support/topic/44123)
   and [http://www.sublimity.ca/2005/09/01/travelog/](http://www.sublimity.ca/2005/09/01/travelog/)
 *  [Beel](https://wordpress.org/support/users/beel/)
 * (@beel)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273573)
 * Doesn’t look like the code as posted would work. Might want to post it in pastebin.
   com
 *  Thread Starter [azumone](https://wordpress.org/support/users/azumone/)
 * (@azumone)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273625)
 * 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](https://wordpress.org/support/users/azumone/)
 * (@azumone)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273632)
 * 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](https://wordpress.org/support/users/nessievl/)
 * (@nessievl)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273764)
 * I tried your script, but I can’t seem to figure out why it isnt working in IE.
 * [http://uncannyvalley.org/uv/](http://uncannyvalley.org/uv/)
 *  [nessievl](https://wordpress.org/support/users/nessievl/)
 * (@nessievl)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273765)
 * 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](https://wordpress.org/support/users/nessievl/)
 * (@nessievl)
 * [20 years, 6 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273777)
 * nm, got it now
 *  [hackspot](https://wordpress.org/support/users/hackspot/)
 * (@hackspot)
 * [19 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273861)
 * Here I’ll teach the simplest way to embed google maps on your postings:
    [http://hackspot.gotdns.com/blog/archives/42/embedding-google-map-in-wordpress-posts/](http://hackspot.gotdns.com/blog/archives/42/embedding-google-map-in-wordpress-posts/)
 * You can see the example here:
    [http://hackspot.gotdns.com/blog/archives/18/inline-google-map-for-wordpress/](http://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:
    [http://www.macdiggs.com/index.php/2006/09/08/inline-google-maps-for-wordpress/](http://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.

## Tags

 * [google maps api](https://wordpress.org/support/topic-tag/google-maps-api/)
 * [map](https://wordpress.org/support/topic-tag/map/)

 * 8 replies
 * 5 participants
 * Last reply from: [hackspot](https://wordpress.org/support/users/hackspot/)
 * Last activity: [19 years, 7 months ago](https://wordpress.org/support/topic/google-maps-api/#post-273861)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics