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

zumajoe

08-03-2010, 04:59 PM

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 (http://code.google.com/apis/maps/documentation/javascript/examples/index.html)

<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>

Rowsdower!

08-03-2010, 05:53 PM

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?

zumajoe

08-03-2010, 07:46 PM

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....

Rowsdower!

08-03-2010, 09:59 PM

zumajoe

08-04-2010, 12:01 AM

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..

Rowsdower!

08-04-2010, 01:00 PM

Ahhhh, look at your page source code. This is the problem:
<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.

zumajoe

08-04-2010, 03:27 PM

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.

<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?

Rowsdower!

08-04-2010, 04:34 PM

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:
<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.

rmsrents

08-05-2012, 11:08 PM

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.gridserver.com/view_prop.php?id=1283
Thank you