WordPress.org

Ready to get started?Download WordPress

Forums

Google maps function without a plugin (17 posts)

  1. Dvd709
    Member
    Posted 3 months ago #

    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="http://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');
  2. yuri06
    Member
    Posted 3 months ago #

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

    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

  3. Dvd709
    Member
    Posted 3 months ago #

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

  4. yuri06
    Member
    Posted 3 months ago #

    Yes in the page you want to show the map

  5. Dvd709
    Member
    Posted 3 months ago #

    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.

  6. yuri06
    Member
    Posted 3 months ago #

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

  7. Dvd709
    Member
    Posted 3 months ago #

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

  8. yuri06
    Member
    Posted 3 months ago #

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

  9. Dvd709
    Member
    Posted 3 months ago #

    Yes :(

  10. Dvd709
    Member
    Posted 3 months ago #

    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?

  11. yuri06
    Member
    Posted 3 months ago #

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

  12. Dvd709
    Member
    Posted 3 months ago #

    Thanks anyway! :)

  13. parcodeisuoni
    Member
    Posted 3 months ago #

    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)

  14. parcodeisuoni
    Member
    Posted 3 months ago #

    ...sorry for my bad english...

  15. yuri06
    Member
    Posted 3 months ago #

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

  16. parcodeisuoni
    Member
    Posted 3 months ago #

    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)

  17. parcodeisuoni
    Member
    Posted 3 months ago #

    @Dvd709: what do you mean exactly with

    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?

Reply

You must log in to post.

About this Topic