Google Maps questions

General Web Dev
1

Last night I added a Google Map to my client’s website. Unfortunately, Google’s tutorials weren’t very helpful, and I have more questions than when I started!

1.) What do end users want/expect?

Do they just want to see my client’s location in the center of the map with one of those balloon things?

Do they want a way to get directions?

2.) I enter the Latitude and Longitude for my client’s shop, but there is no balloon showing where the shop is.

3.) Google Maps seems to ignore the Height I set in CSS, and there is no right border.

2

What do you want/expect? What does your client want/expect?

Depends on what the maps purpose is for. If it’s for directions, perhaps both location points on the map? Dunno.

Probably some specificity issue.

3

You may have the lat and long the wrong way around - zoom way out and see if it is elsewhere. From memory the first time I did it my marker was in Africa somewhere!

I found it quite simple I just pasted the code into the page and set the position but I know like everything else these days it is getting more complicated! I would see if your css is interfering with the Google one by embedding the code into a html page with just the basic code and see what happens.

4

Doesn’t matter - I’m building this for potential customers.

So when you go to a website with a Google Map, how do you use it?

Should there be a form where you enter your address so you can map to the store?

Or is just seeing where the shop is located on a map good enough?

I guess I don’t really understand what users expect.

5

If I’m not mistaken, the user can click the “balloon” pinpoint which should open a dialog within the map to enter a start address.

:slight_smile:

6

If I had a balloon in my map I would know that! :smile:

Any idea why I have no balloon even though I can see on the map that the coordinates are correct?

7

Ideally it would be nice if my map looked something like this (including the company name)…

8

Have you followed @Rubble’s advice and zoomed out to see if your ‘baloon’ is someplace else?

V/r,

:slight_smile:

9

I see an orange man in the upper left-hand corner above the +/- signs, but no balloon even if I zoom out.

And I double checked the Latitude and Longitude and they are coming from Google Maps when I just did a search in Google.

Maybe I am missing some configuration or code that is causing this issue?

10

The code can be a bit tricky to get used to I guess.
What do you have now?

In particular, this part, and what does the array look like?

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMapMarkers(map, location_array);
11

Here is what I have in index.php

<head>
    <!-- JavaScript for Google Maps -->
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize(){
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions = {
                center: new google.maps.LatLng(xxx, yyy),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(mapCanvas, mapOptions);
        }
        
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

Then farther down in the same file I have…

                    <!-- Google Map -->
                    <?php    require_once('components/content_map.inc.php');    ?>

And then in my include I have…

<?php
    // Canvas for Google Map.
    echo "<div id='map-canvas'></div>";
?>
12

Well if you actualy have xxx, yyy that is your problem

1 Like
13

Well if you actualy have xxx, yyy that is your problem you shoul have something like 47.546266, -122.300899

1 Like
14

Right, those are dummy values. I tried it with actual values and thus have the issue we are discussing.

15

The location_array should be something like

var location_array = [
		['name', ##.#######, -##.#######]
		];

Then you set the pins like so

var map_image = '../images/MapLocationPins/PNG/pin-green-solid-10.png';
function setMapMarkers(map, location_array) {
  for (var i = 0; i < location_array.length; i++) {
    var map_pins = location_array[i];
    var myLatLng = new google.maps.LatLng(map_pins[1], map_pins[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
		icon: map_image,
        title: map_pins[0]
    });
  }
}
16

I noticed that I don’t have this line of code…

setMapMarkers(map, location_array);

Where does that go? (It wasn’t in Google’s tutorial)

17

On a line of it’s own. I put mine under the “new map”

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMapMarkers(map, location_array);
18

Looks like I get a crash-course in JavaScript even though I don’t want to learn it yet…

So where did all of this code come from? (It wasn’t in the tutorial I read.)

And can you help me understand it, since I don’t know JavaScript.

Also, what about the code I posted above? (That was supposed to be all Google said I needed.)

19

I started here

mine is similar except I have multiple pins

For a basic “no frills” map. But you want more (as most would !)

1 Like
20

:d’oh: I forgot to answer this before.

As you understand PHP JavaScript should come fairly easy for you.
They are both “C” type languages.

There are differences to be sure, but there are more similarities.
eg.
var variable = "value"; instead of $variable = "value";

If anything is undecipherable, just ask.