Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Get this content (google maps V3 api) into WordPress page?

    Here is the test page. It loads the directions below the map in a Div.
    http://web.me.com/zumajoe/directions/index.html

    The above example was taken directly from Google Maps API 3 samples and I cannot get it to work on creating a new page in WordPress (even on the default theme) pasting the code inside "HTML". The map won't even show up.

    What would you say the best procedure to integrating my example page into wordpress?


    Official Google API examples:
    Google Maps API 3 examples


    Code:
    <html>
    <head>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </head>
    <body>
    <body onload="document.body.focus()" onkeyup="keypressed()">
    
    <style>
    body {
      font-size: 0.8em;
    }
    
    #map-container, #side-container, #side-container li {
      /*float: left;*/
    }
    
    #map-container {
      width: 900px;
      height: 300px;
    }
    
    
    
    #dir-container {
      overflow: auto;
      padding: 2px 4px 2px 0;
      width: 900px;
      
    }
    #dir-container table {
      font-size: 1em;
      width: 100%;
    }
    </style>
    From:
    <input id="from-input" type=text value="San Francisco, CA"/>
    <select onChange="Demo.getDirections();" id="travel-mode-input">
      <option value="driving" selected="selected">By car</option>
          <option value="bicycling">Bicycling</option>
          <option value="walking">Walking</option>
    </select>
    <input onClick="Demo.getDirections();" type=button value="Go!"/></form>
    
    
    <div id="map-container"></div>
    
    
    <div id="dir-container"></div>
    
    
    
    <script type="text/javascript">
    
    var blackBeards = new google.maps.LatLng(34.242, -119.265);
    
    
     function keypressed(){
    if(event.keyCode=='13'){Demo.getDirections();}
    }
    
    
    var Demo = {
      // HTML Nodes
      mapContainer: document.getElementById('map-container'),
      dirContainer: document.getElementById('dir-container'),
      fromInput: document.getElementById('from-input'),
    
      travelModeInput: document.getElementById('travel-mode-input'),
      unitInput: document.getElementById('unit-input'),
    
      // API Objects
      dirService: new google.maps.DirectionsService(),
      dirRenderer: new google.maps.DirectionsRenderer(),
      map: null,
    
      showDirections: function(dirResult, dirStatus) {
        if (dirStatus != google.maps.DirectionsStatus.OK) {
          alert('Directions failed: ' + dirStatus);
          return;
        }
    
        // Show directions
        Demo.dirRenderer.setMap(Demo.map);
        Demo.dirRenderer.setPanel(Demo.dirContainer);
        Demo.dirRenderer.setDirections(dirResult);
      },
    
      getSelectedTravelMode: function() {
        var value =
            Demo.travelModeInput.options[Demo.travelModeInput.selectedIndex].value;
        if (value == 'driving') {
          value = google.maps.DirectionsTravelMode.DRIVING;
        } else if (value == 'bicycling') {
          value = google.maps.DirectionsTravelMode.BICYCLING;
        } else if (value == 'walking') {
          value = google.maps.DirectionsTravelMode.WALKING;
        } else {
          alert('Unsupported travel mode.');
        }
        return value;
      },
    
      getSelectedUnitSystem: function() {
        
          
            google.maps.DirectionsUnitSystem.IMPERIAL;
      },
    
      getDirections: function() {
        var fromStr = Demo.fromInput.value;
     
        var dirRequest = {
          origin: fromStr,
          destination: blackBeards,
          travelMode: Demo.getSelectedTravelMode(),
          unitSystem: Demo.getSelectedUnitSystem(),
          provideRouteAlternatives: true
        };
        Demo.dirService.route(dirRequest, Demo.showDirections);
    	
      },
    
      init: function() {
        var latLng = new google.maps.LatLng(34.242, -119.265);
    	
        Demo.map = new google.maps.Map(Demo.mapContainer, {
          zoom: 13,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
    	
    	 
    	  
    	  
    	  
        });
    	
    	 
    
        // Show directions onload
      Demo.getDirections();
     
    
     
      }
      
      
      
      
    };
    
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', Demo.init);
    </script>
    </body>
    </html>

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I believe you need an API key for your domain before google maps will show you anything at all. Have you registered for - and passed to google in your script call - a key for your domain?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    I believe you need an API key for your domain before google maps will show you anything at all. Have you registered for - and passed to google in your script call - a key for your domain?
    Google maps V3 doesn't require API keys anymore. And as you can see the example link I posted works fine on my domain....

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Sorry, it has been a while since I played with google maps (and I didn't realize that was your domain). Can you post a link to the failing WP page?

    If an API key isn't the issue then you may have a javascript conflict or somesuch. Seeing the page live and in its entirety will make diagnosis more practical.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Sorry, it has been a while since I played with google maps (and I didn't realize that was your domain). Can you post a link to the failing WP page?

    If an API key isn't the issue then you may have a javascript conflict or somesuch. Seeing the page live and in its entirety will make diagnosis more practical.
    Thanks Rows,

    Here is a link to the page: http://tinyurl.com/29kwkad

    I disabled any plugins just to be sure there are no conflicts..

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Ahhhh, look at your page source code. This is the problem:
    Code:
    <p><script type="text/javascript"></p>
    <p>var blackBeards = new google.maps.LatLng(34.242, -119.265);</p>
    <p> function keypressed(){
    if(event.keyCode=='13'){Demo.getDirections();}
    }</p>
    <p>var Demo = {
      // HTML Nodes
      mapContainer: document.getElementById('map-container'),
      dirContainer: document.getElementById('dir-container'),
      fromInput: document.getElementById('from-input'),</p>
    <p>  travelModeInput: document.getElementById('travel-mode-input'),
      unitInput: document.getElementById('unit-input'),</p>
    <p>  // API Objects
      dirService: new google.maps.DirectionsService(),
      dirRenderer: new google.maps.DirectionsRenderer(),
      map: null,</p>
    <p>  showDirections: function(dirResult, dirStatus) {
        if (dirStatus != google.maps.DirectionsStatus.OK) {
          alert('Directions failed: ' + dirStatus);
          return;
        }</p>
    <p>    // Show directions
        Demo.dirRenderer.setMap(Demo.map);
        Demo.dirRenderer.setPanel(Demo.dirContainer);
        Demo.dirRenderer.setDirections(dirResult);
      },</p>
    <p>  getSelectedTravelMode: function() {
        var value =
            Demo.travelModeInput.options[Demo.travelModeInput.selectedIndex].value;
        if (value == 'driving') {
          value = google.maps.DirectionsTravelMode.DRIVING;
        } else if (value == 'bicycling') {
          value = google.maps.DirectionsTravelMode.BICYCLING;
        } else if (value == 'walking') {
          value = google.maps.DirectionsTravelMode.WALKING;
        } else {
          alert('Unsupported travel mode.');
        }
        return value;
      },</p>
    <p>  getSelectedUnitSystem: function() {</p>
    <p>        google.maps.DirectionsUnitSystem.IMPERIAL;
      },</p>
    <p>  getDirections: function() {
        var fromStr = Demo.fromInput.value;</p>
    <p>    var dirRequest = {
          origin: fromStr,
          destination: blackBeards,
          travelMode: Demo.getSelectedTravelMode(),
          unitSystem: Demo.getSelectedUnitSystem(),
          provideRouteAlternatives: true
        };
        Demo.dirService.route(dirRequest, Demo.showDirections);</p>
    <p>  },</p>
    <p>  init: function() {
        var latLng = new google.maps.LatLng(34.242, -119.265);</p>
    <p>    Demo.map = new google.maps.Map(Demo.mapContainer, {
          zoom: 13,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP</p>
    <p>    });</p>
    <p>    // Show directions onload
       // Demo.getDirections();</p>
    <p>  }</p>
    <p>};</p>
    <p>// Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', Demo.init);
    </script></p>
    Your WP post is adding <p></p> tags around segments of code you inserted, which creates a syntax error in the javascript and prevents the code from executing. Take your post out of the WYSIWYG mode and paste the correct code in fresh (you can then go back into WYSIWYG mode for the rest of the post, if needed). I believe that should do the trick.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    zumajoe (08-04-2010)

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post

    Your WP post is adding <p></p> tags around segments of code you inserted, which creates a syntax error in the javascript and prevents the code from executing. Take your post out of the WYSIWYG mode and paste the correct code in fresh (you can then go back into WYSIWYG mode for the rest of the post, if needed). I believe that should do the trick.
    Strange- the WP was adding those <p> tags even without using the WYSIWYG editor. I had to install a plugin called "Disable WP AutoP". The P tags are gone, and I got it work perfectly!

    http://tinyurl.com/29kwkad

    Thanks Rows, I needed that.

    I have a function inside this code also so that hitting the "enter" key it will activate the "GO!" button... however I don't think this is a good practice and it seems to only work in Safari.

    Code:
    <body onload="document.body.focus()" onkeyup="keypressed()">
    
    function keypressed(){
    if(event.keyCode=='13'){Demo.getDirections();}
    }
    I've read that the button might need to be buttontype: SUBMIT?

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Yes, type="submit" will make a form submit when you hit enter while focused on one of that form's input elements...but...you have no form. You only have loose input elements.

    There are a number of ways you could go about this (you could wrap the input elements in a form and use the onsubmit attribute to kill the actual form submission and just run the google maps code, etc.).

    It's probably kind of hacky and maybe someone better with javascript can chime in, but off the top of my head I would do this:
    Code:
    <input id="from-input" type=text value="San Francisco, CA" onkeypress="if(event.keyCode==13){Demo.getDirections();}" />
    This prevents any accidental form submissions into oblivion (since you won't be inserting a form into the page) and only activates when a user has javascript enabled. If they hit the enter key while typing in that box then the directions query runs just as if they had clicked on the button.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    zumajoe (08-04-2010)

  • #9
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi, I'm having the same problem and I saw that wordpress was placing <p> in my javascript so I followed the steps to get rid of it.
    Even with that fixed I'm unable to have the map load onto the page.
    A link to the page is http://dev.forrent.com.s36686.gridse...op.php?id=1283
    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •