Using the Google Maps API to draw radiuses

Hi

I'm trying to get a raduis circle working in google maps to show the area that my business covers.

I'm using the following link

http://www.dankross.co.uk/2015/04/using-the-google-maps-api-to-draw-radius-circles/

But it's not working. Does anyone know of a good plugin that will work or why it's not working?

Cheers
Kieran

  • Patrick
    • Support Monkey

    Hi there @Kieran

    I hope you had a great weekend!

    That tutorial worked just fine for me as seen on my test site here:
    http://test.pcwriter.net/sample-page/

    If you are trying to get your map to display on a page instead of a post, be sure to change the code you add to your header.php from this:

    <?php
    if (is_single()) {
     if ($custom_header = get_post_meta($post->ID, 'custom_header', true)) {
     echo $custom_header;
     }
    }
    ?>

    ...to this:

    <?php
    if (is_page()) {
     if ($custom_header = get_post_meta($post->ID, 'custom_header', true)) {
     echo $custom_header;
     }
    }
    ?>

    Then add your custom field, the finished code as given on that tutorial, and add the required div to your page's test editor (see screenshot below).

  • Kieran
    • The Crimson Coder

    Hi @Patrick

    I don't suppose you know how to enhance the code so I could get two different places on a map and then center on a place of my choosing. Can't quite get it to work.

    Two random points will do I can alter the location co-ordinates it's just the order of the code and where it goes I need a little help with

    The code here might help centralise it? Or I can just chose a place in the middle myself easy enough

    http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/

    Thanks in advance :slight_smile:

    Kieran

  • Ash
    • WordPress Hacker

    Hello @Kieran

    I hope you are well today.

    The above code won't centralize but will show all markers and make required zoom. So, you will see all markers in same viewport.

    You need to use that code exactly where you have added your javascript code. If you are added with the custom values and then it should work fine.

    Please let me know how it goes.

    Cheers
    Ash

  • Kieran
    • The Crimson Coder

    Ok I think I've figured it out. This will do what I want it too even if it means playing around with the population size to give me a radius. It's good enough!

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Circles</title>
    <style>
    html, body, #map-canvas {
    height: 400px;
    width: 100%;
    margin: 0px;
    padding: 0px
    }
    .gmnoprint img {
    max-width: none !important;
    }
    </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
        <script>
    
    var citymap = {};
    citymap['manchester'] = {
      center: new google.maps.LatLng(53.480112, -2.245908),
      population: 10000
    };
    citymap['warrington'] = {
      center: new google.maps.LatLng(53.395617, -2.596889),
      population: 10000
    };
    
    var cityCircle;
    
    function initialize() {
      // Create the map.
      var mapOptions = {
        zoom: 9,
        center: new google.maps.LatLng(53.424984, -2.440334),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    
      var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    
      // Construct the circle for each value in citymap.
      // Note: We scale the area of the circle based on the population.
      for (var city in citymap) {
        var populationOptions = {
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          center: citymap[city].center,
          radius: Math.sqrt(citymap[city].population) * 100
        };
        // Add the circle for this city to the map.
        cityCircle = new google.maps.Circle(populationOptions);
      }
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
        </script>
      </head>
    </html>
  • Kieran
    • The Crimson Coder

    No problems guys thanks for your help

    I want to push it a bit further and add markers with info windows I can put a link into. It will take my customers to book appointments at different locations so will be kinda cool.

    I'm going to look at the Googlemaps Api help files and it all seems possible. Will post back if I manage it or get stuck!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.