Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Google Maps API in JS and WordPress


  • Please log in to reply
3 replies to this topic

#1 David7626

David7626

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:03:57 PM

Posted 11 February 2015 - 01:24 AM

I created this film in Dreamweaver where you see two different Google Maps if you press on these two buttons. 

The problem is have no idea how to include this style of coding in WordPress. Any ideas? Code is below.

 


 

<!doctype html>
<head>
<style>
#map_canvas {height: 500px; width: 400px;border:1px solid red;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</head>
<body>
<div>
<form id="myform">
<input type="button" value="Show Stanthorpe" onClick="showmap();">
<input type="button" value="Show Orange and Batlow" onClick="showmap2();"> 
</form>
</div>
<div id="map_canvas"></div> 
<script src="multipleMaps.js"></script> 
</body>
</html>

 

 

 

 
// JavaScript Document
<!-- Display Map -->
function showmap() {

function initialize() {
var map;
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.654574, 151.934975),

mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas
mapOptions);
}

initialize();
}

function showmap2() {
function initialize() {
var map2;
var mapOptions2 = {
zoom: 12,
center: new google.maps.LatLng(-35.519658, 148.153374),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map2 = new google.maps.Map(document.getElementById('map_canvas
mapOptions2);
}
initialize();
}
 


BC AdBot (Login to Remove)

 


m

#2 ChiefTech

ChiefTech

  • Members
  • 70 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Oregon
  • Local time:08:57 PM

Posted 13 February 2015 - 01:31 AM

Haven't really tried to mess around with Java in Wordpress yet but I found this information on it:
http://codex.wordpress.org/Using_Javascript

#3 David7626

David7626
  • Topic Starter

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:03:57 PM

Posted 18 February 2015 - 05:26 PM

Thanks. I figured it out how to do it a couple of days ago.

 

First, I went into the CMS and pasted the "<input type="button" value="Show Stanthorpe" onClick="showmap();">" on one of the pages. Then, I created a div element called "map-canvas" to make the map display on screen as soon as the button is clicked. NOTE: for the time being, I used the plugin Google Map Builder and copied and pasted the shortcode to inside the div element. Without this plugin, the map won't render at all, and it will come with a null object reference error when you inspect it on the browser.

 

 

<div id="map-canvas">[google_maps id="67"]</div>

 

 

And then I created a JS file called 'maps', and wrote down this block of code.

 

 

function showmap1() {

     
   function initialize(location) {
    var map1 = this;
        var mapOptions1 = {
          zoom: 4,
       center: new google.maps.LatLng(-28.654574, 151.934975),
       };                                                       
        map1 = new google.maps.Map(document.getElementById('map-canvas'), mapOptions1);
      }
 
initialize();
}
 
And finally, I went to the bottom of my functions.php file, and wrote a wp_enqueue_script to link the JS file onto my site.

 

 

/*----------------------------------------------------------WP Enqueue Scripts-------------------------------------------------------------*/

add_action('wp_enqueue_scripts', 'enqueue_assets');

 
function enqueue_assets() {
wp_enqueue_script('maps',get_stylesheet_directory_uri(). "/javascript/maps.js",array('jquery'),$version,true);
}

 

I'm definitely all ears if there are better ways to do this, but otherwise I'm happy with what I have at the moment.


Edited by David7626, 18 February 2015 - 06:31 PM.


#4 ChiefTech

ChiefTech

  • Members
  • 70 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Oregon
  • Local time:08:57 PM

Posted 18 February 2015 - 08:46 PM

I'm glad you got it figured out and thanks for sharing. I'm sure others will find it helpful. We'll see how much workload I get done tomorrow and see how my brain feels and I might check it out. Lol.

Edited by ChiefTech, 18 February 2015 - 08:46 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users