WordPress, GoogleMaps & JavaScript in header.php

Question

I would like to display a GoogleMap with multiple pointers in the entry page of a WordPress website (www.santini.se/geotimes). I specified the following Javascript code within the head of header.php:

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=mykey"  type="text/javascript"></script>
 <script src="map_data.php" type="text/javascript"></script>
 <script src="map_functions.js" type="text/javascript"></script>

Then I specified a div just after the body tag in header.phh:

  http://www.santini.se/prova/listOfPontersCh2/http://www.santini.se/prova/listOfPontersCh2/<div id="map" style="width: 350px; height: 350px; border: blue 4px dashed">whyyyy</div>

The files map_data.php and map_functions.js are placed in the same folder as header.php.

This code works correctly outside WordPress. You can see it here: http://www.santini.se/prova/listOfPontersCh2/

Why is it not working within WordPress?

Any hint would help :-(

Thanks in advance

Regards

Marina

Answer 1

I think your scripts aren't linked properly. The URI in the scr-attribute must be relative to the current URL, not to the PHP-file.

If your theme is 'prosumer', this would probably solve it:

<script src="http://www.santini.se/geotimes/wp-content/themes/prosumer/map_data.php" type="text/javascript"></script>
<script src="http://www.santini.se/geotimes/wp-content/themes/prosumer/map_functions.js" type="text/javascript"></script>

Or you could do it programmatically (which I prefer):

<script src="<?php bloginfo('template_directory'); ?>/map_data.php" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/map_functions.js" type="text/javascript"></script>