WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Google Maps JavaScript v3 on WordPress page (7 posts)

  1. Marteens
    Member
    Posted 3 months ago #

    Hi!

    I am trying to get this map into a page on my WordPress site. As you can see they give you a code in JavaScript or in JavaScript+HTML.

    Now, I am not very pro with coding, so I'm not quite sure how to get this code to become a map on my site. I have tried to search for an answer, but what I have found have just made me more confused. Any advice to how I could do this?

    Thanks!

  2. justin_flowpress
    Member
    Posted 2 months ago #

    Hi there,

    There are a few different ways of doing this.

    The best advice I can give you is to start with just getting a very basic map to display on your page to simplify things. Once you have that working, update the google maps code with this more advanced map.

    So, to make the map display, you need to do a few things:

    - Enqueue the Google Maps JS, for example:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    - Have the necessary css for your map container, for example:

    <style>
    	html, body, #map-canvas {
    		height: 100%;
    		width: 100%;
    		margin: 0px;
    		padding: 0px
    	}
    </style>

    - Your map canvas in your template, for example:

    <div id="map-canvas"></div>

    - Load the map (javascript in your wordpress template), for example

    <script>
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    Anyway, this is the basic gist of getting custom maps to display in a wordpress template. It's got a few different parts, so it takes some programming ability.

    Depending on what you need, you could look into what kinds of plugins are available that use draggable directions.

  3. Marteens
    Member
    Posted 2 months ago #

    Hi! Thank you for your answer, and thanks for the very clear explanation of every step!

    I tried what you said, and I inserted this code

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    
    <style>
    	html, body, #map-canvas {
    		height: 500px;
    		width: 100%;
    		margin: 0px;
    		padding: 0px
    	}
    </style>
    
    <div id="map-canvas"></div>
    
    <script>
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    into this page. As you can see, the map seems to be working as it should, but I still have the same issues as I had with the other map.

    I have been searching for a plugin that can do this for me, and I have tried so many of them. But so far I haven't found a plugin that can give me a map with directions from A to B like the one I want (like this - just without bugs :p ). I am now trying a pluging that might work though, called WP Flexible Map, so I'll let you know how that goes. Anyway, thanks again for the answer.

  4. justin_flowpress
    Member
    Posted 2 months ago #

    At this point, you could replace the js block above with the js that loads a map with directions. You'd also need to add the directions panel to your html.

    This should load the type of map you're looking for.

  5. Marteens
    Member
    Posted 2 months ago #

    I am very sorry, I thought this was another post. As you can see in that post I have found one way to get the map into a page, but it's with some bugs.

    The bugs are that the zoom control and the little yellow man (street view) on the left side of the map is behaving wierd and not showing properly. And the same for the "x" to get out of street view. Besides, the street view isn't working at all in Firefox for some reason. It works in Chrome, Safari and IE, but not in Firefox.

    The problems I had with the first map also comes with the new and simpler map that you suggested. So I'm not sure what's causing it.

    Again, sorry about the confusion.

  6. Marteens
    Member
    Posted 2 months ago #

    Anyway, the WP Flexible Map plugin seems to be working great. Check out this map that I made with the plugin. :)

  7. justin_flowpress
    Member
    Posted 2 months ago #

    That's great. Looks like you've got things working now. :)

Reply

You must log in to post.

About this Topic