Google maps function without a plugin

  • Hi guys,

    I need to implement Google maps into this website without using a plugin, though I have a custom written jscript function in my scripts.js.

    Now i’m left puzzled on how to make this visual on wordpress. What I tried so far is this, and i’m not sure how to otherwise.

    //Google Maps
function gmaps_header(){
?>
	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<?php
}
add_action('wp_head','gmaps_header');

function gmap() {
if ( is_page('contact') ) {
	    wp_register_script('initialize', ("". get_template_directory_uri() ."/scripts/script.js"));
	wp_enqueue_script('initialize'); }
}
add_action( 'wp_print_scripts', 'gmap');
Viewing 15 replies - 1 through 15 (of 16 total)

  • <iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”https://maps.google.it/?ie=UTF8&ll=45.657417,9.96278&spn=3.873965,8.113403&t=m&z=8&output=embed”></iframe&gt;

    copy this in to your post, if you want to change the position modify the ll=45.657417,9.96278 and for the zoom z=8

    Thread Starter Dvd709

    (@dvd709)

    Into my post as in the page I want it in or?

    Yes in the page you want to show the map

    Thread Starter Dvd709

    (@dvd709)

    I did that and it’s not helping :S.

    <?php get_header(); ?>

<?php if ( have_posts() ) :
      while ( have_posts() ) : the_post(); ?>

<?php wp_nav_menu( array( 'theme_location' => 'header-menu'));  ?>
<?php if ( dynamic_sidebar('example_widget_area_name') ) : else : endif; ?>

<?php the_title(); ?>
<?php the_content(); ?>

<div id="map_canvas">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/?ie=UTF8&ll=45.657417,9.96278&spn=3.873965,8.113403&t=m&z=8&output=embed"></iframe>
</div>

<?php endwhile; endif; ?>

<?php get_footer(); ?>

    By the way <map_canvas> should’ve been where it should have appeared according to my custom js.

    Copy the code in the page, like if you want to write a normal text, just copy the code, nothing happens?

    Thread Starter Dvd709

    (@dvd709)

    Yea if I do that it’ll paste the exact code on the page(I’m assuming you mean through the CMS), just like writing this <?php echo ‘<html></html>’; you’d see the html as text that’s what’s happening now >.<

    Also if you copy the code in Text and not in Visual?

    Thread Starter Dvd709

    (@dvd709)

    Yes ??

    Thread Starter Dvd709

    (@dvd709)

    Oh hey wait I figured it out I got it on visual now! All I have to do now is combine it with my JS code because it’s not allocated to me but just somewhere random, any idea how I can do this?

    No I’m sorry but this I don’t knwo..maybe try to start a new thread!

    Thread Starter Dvd709

    (@dvd709)

    Thanks anyway! ??

    Hi,
    from the Google Maps API samples, seems quite simple to get a map…

    once you enqueued the js, and set a div to show the map, you can set it up via you script.js as you need (like in the samples)

    …sorry for my bad english…

    secondo te perchè se copia solo quel codice che gli ho postato non gli funziona?

    Ciao, ok…
    I answer in english so others can benefit from this thread….

    Gmaps generates an iframe code to be directly copied into a web page, and this will show the map without having the possibility to control it.

    with gmaps API you need to:
    – include gmaps js (possibly the right way..)
    – set css dimensions to map_canvas class (created from the API)
    – create a div where you need it in your html structure, and give it a class “map_canvas”
    – initialise the map as well as settings and controls via a custom js (in this case, inside script.js)

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Google maps function without a plugin’ is closed to new replies.