bw_googlemap_v3() – Display a Google Map using Google Maps JavaScript API V3

You appear to be a bot. Output may be restricted

Description

Display a Google Map using Google Maps JavaScript API V3

Display a Google Map

• centred around the lat and long specified in oik options
• zoomed to level 12 – which is good for local viewing
• with a red marker centred at the lat,long
• and showing the postcode as a tool tip
• and an info window showing the title and postcode

For programming details see http://code.google.com/apis/maps/documentation/javascript/basics.html#Welcome Restrictions of this implementation

1. Does not detect the user's location -> sensor=false
2. Does not detect IPhone or Android devices
3. Does not perform language localization
4. Region defaults to GB
5. Does not add any additional libraries. not geometry, adsense nor panoramio
6. Does not support loading the API over HTTPS
7. Loads synchronously – rather than Asynchronously
8. Does not specify the version. v=3 being the default

If this doesn't work don't forget to set: #bw_map_canvas { height: 100% } in oik.css or your custom CSS file Note: the default height is 100%

1. Oct 2014: Quick and Dirty fix to support the display of multiple Google maps on a page.

Each time the routine is invoked it increments the $map variable. This is used to create multiple initialize functions. At the end of the initialize function, if the map is greater than one then it invokes the previous initialize function. So initialise1() will call initialize0() This gets over the problem of only the last initialize function being called by window.onload=initialisen;

Usage

bw_googlemap_v3( $title, $lat, $lng, $postcode, $width, $height, $markers, $zoom );

Parameters

$title

( string ) required – part of the infowindow

$lat

( number ) required – latitude

$lng

( number ) required – longitude

$postcode

( string ) required – part of the infowindow

$width

( string ) required – width in pixels or percentage

$height

( string ) required – height in pixels

$markers

( string ) optional – display multiple markers – for each alt number chosen.

$zoom

( mixed ) optional default: 12 –

Returns

void

Source

File name: oik/shortcodes/oik-googlemap.php
Lines:

1 to 48 of 48

function bw_googlemap_v3(  $title, $lat, $lng, $postcode, $width, $height, $markers=null, $zoom=12 ) {
  bw_trace2();
  $map = bw_gmap_map( false );
  $latlng = bw_gmap_latlng( $lat, $lng ); 
  
  if ( !$map ) {
    $src = set_url_scheme( "http://maps.googleapis.com/maps/api/js?&region=GB" );
    bw_echo( '<script type="text/javascript" src="' . $src );
    bw_echo( bw_gmap_api_key() );
    bw_echo( '"></script>' );
  }
  bw_echo( '<script type="text/javascript">' );
  bw_echo( 'function initialize' . $map . '() {' );
  bw_echo( 'var latlng = new google.maps.LatLng('. $latlng .');' );
  
  // Choose from ROADMAP, SATELLITE, HYBRID, TERRAIN 
  bw_echo( "var myOptions = { zoom: $zoom, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };" );
  bw_echo( 'var map = new google.maps.Map(document.getElementById("bw_map_canvas' . $map . '"), myOptions); ' );
  
  if ( $postcode ) {
    bw_gmap_marker( $postcode );
    bw_gmap_infowindow( $title, $postcode );
  }
  if ( $markers ) {
    bw_gmap_markers( $markers );
  }
  
  if ( $map ) {
    $previous = $map - 1;
    bw_echo( 'initialize' . $previous. '();' );
  }
  bw_echo( '}' );
  bw_echo( 'window.onload=initialize' . $map . ';');

  bw_echo( '</script>' );
  
  
  // Here we set the min-height so that the Google Map should at least be visible 
  
  if ( $height ) {
    $hv = ' height:'. $height; 
  } else {
    $hv = '';  
  }  
  bw_echo( '<div class="bw_map_canvas" id="bw_map_canvas' . $map . '" style="min-height: 200px; width:' . $width. ';' .$hv .';"></div>');
  bw_gmap_map();

}
 

 View on GitHub View on Trac