Solved

add center marker on google maps using api

Posted on 2012-04-12
21
651 Views
Last Modified: 2012-04-13
I have a page where I built out a google map using the google maps api. Here is that url:

http://genstoneproducts.seozones1.com/google-map.php

I want to use latitude and longitude coordinates as the center marker which I've placed in the array: {latitude: 49.8997541,longitude: -89.1374937}

However, I don't want that pin to display.  Perhaps I entered that wrong but the center marker should be those above coordinates.

Also, I set the mouse wheelscroll to false but it still zooms in and out.  How would I get that to work?
0
Comment
Question by:COwebmaster
  • 11
  • 8
  • 2
21 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
When you initialize the map, you set the longitude and latitude where you want to center the map

        var ccLoc = new google.maps.LatLng(49.8997541, -89.1374937);
        var ccOptions = {
            zoom: 16,
            center: ccLoc,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        }

No pin will show unless you specifically set one.
0
 

Author Comment

by:COwebmaster
Comment Utility
Okay, thanks but where would I place those lines of code on my page?
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Just incorporate what you need from my generic example like this:
<script type="text/javascript">
$(function() {
var ccLoc = new google.maps.LatLng(49.8997541,-89.1374937);
    
$("#map").gMap({ markers:

[
{latitude: 43.158992,longitude: -80.239709,html: "<strong>Mitten Inc.</strong><br />225 Henry St. Bldg #5 Brantford, ON N3S7R4<br />Phone: 519-753-1810<br />Fax: 866-264-1986<br />Toll Free: 800-265-2550",popup: false},
{latitude: 42.93197,longitude: -81.167191,html: "<strong>Mitten Inc.</strong><br />3969 Commerce Rd. Unit #2 London, ON N6N1P5<br />Phone: 519-644-2675<br />Fax: 519-644-9069<br />Toll Free: 877-858-2675",popup: true},
{latitude: 45.410886,longitude: -75.616381,html: "1290 Old Innes Rd. Unit #713 Ottawa, ON K1B5M6",popup: false},
{latitude: 49.179353,longitude: -122.661947,html: "20215-97th Ave. Unit #1 Langley, BC V1M4B9",popup: false},
{latitude: 53.494221,longitude: -113.453274,html: "8412 Davies Rd. Edmonton, AB T6E4Y5",popup: false},
{latitude: 51.00526,longitude: -114.04511,html: "5622 Burleigh Cres. S. E. Unit #12 Calgary, AB T2H1Z8",popup: false},
{latitude: 52.172471,longitude: -106.662526,html: "2750 Faithful Ave. Unit #303 Saskatoon, SK S7K6M6",popup: false},
{latitude: 50.455139,longitude: -104.578531,html: "305 Dewdney Ave. Regina, SK S4N4G3",popup: false},
{latitude: 49.925897,longitude: -97.20916,html: "2065 Logan Ave. Unit #7 Winnipeg, MB R2A0J1",popup: false},
{latitude: 45.663531,longitude: -73.888099,html: "880. Boul Michele-Bohec, Suite 103 Blainville, QC J7C5E2",popup: false},
{latitude: 45.473882,longitude: -73.391226,html: "3405, 1ere Rue St.-Hubert, QC J3Y8Y6",popup: false},
{latitude: 44.709191,longitude: -63.609564,html: "20 Gurholt Drive Dartmouth, NS B3B1L9",popup: false},
{latitude: 45.92754,longitude: -66.722997,html: "20 Casewood Drive Hanwell, NB E3C2L5",popup: false},
{latitude: 45.390142,longitude: -71.969207,html: "144 Rue Leger Sherbrooke, QC J1L1L9",popup: false},
{latitude: 45.76036,longitude: -73.486638,html: "436 Rue St-Paul Le Gardeur, QC J5Z4H9",popup: false},
{latitude: 47.5241,longitude: -52.84104,html: "48 Glencoe Drive Mount Pearl, NL A1N4S9",popup: false},
{latitude: 46.091485,longitude: -64.84716,html: "215 English Drive Moncton, NB E1E3Y8",popup: false},
{latitude: 44.712395,longitude: -63.609269,html: "10 Vidito Drive Dartmouth, NS B3B1P9",popup: false},
{latitude: 45.272992,longitude: -66.007935,html: "855 Bayside Drive Saint John, NB E2R1A3",popup: false},
{latitude: 53.582272,longitude: -113.534216,html: "12603 123rd St. NW Edmonton, AB T5L0H9",popup: false},
{latitude: 51.085421,longitude: -114.034077,html: "1216-A 36 Avenue NE Calgary, AB T2E6M8",popup: false}],

zoom: 4,
center: ccLoc,
scrollwheel: false
});


});
</script>

Open in new window

0
 

Author Comment

by:COwebmaster
Comment Utility
Okay, I did that but the center is off.  It should be the address at:

2065 Logan Ave. Unit #7 Winnipeg, MB R2A0J1

Also, the scrollwheel still zooms and out on the map.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
These are the proper coordinates for that location: 49.926265,-97.209156

Did you change from wheelscroll to scrollwheel?
0
 

Author Comment

by:COwebmaster
Comment Utility
I added those coordinates the pins are hidden above the map so the centering is off still.

Yes, I added in scrollwheel: false but I can still zoom in and out with my mouse scroll.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
I added those coordinates the pins are hidden above the map so the centering is off still.

You have an infoWindow popping up when the map loads. This will move the center down to make the infoWindow visible. Otherwise, I don't know what you mean by "the pins are hidden above...".

The scrollwheel:false will be ignored unless controls: are also set explicitly in the map options, but I don't yet have a working example.
0
 

Author Comment

by:COwebmaster
Comment Utility
you may need to refresh that page or remove cache because no info window should be displaying on page load.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Your original markers array had the second marker set to popup:true. Refreshing your original link would have reflected the change, but I cannot work from your original link as I cannot change the javascript there, I need to work from a local copy.

As I said earlier, getting the scrollwheel:false to work is a matter of also explicitly setting the controls. The reason: If "controls" is not set, the scrollwheel option will be ignored (because default map controls are applied).

For example, at the bottom of your code, if you did this, the scroll zoom will be disabled:
...

zoom: 4,
center: ccLoc,
controls:["GSmallMapControl", "GMapTypeControl"],
scrollwheel: false,
});
0
 

Author Comment

by:COwebmaster
Comment Utility
okay, I got to scrollwheel to stop working which is great.

Now, not sure why the centering of the map is still off.  All of those popups are set to 'false'.

Here is the url: http://genstoneproducts.seozones1.com/google-map.php
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
It's obviously centering on the first marker in the array. We will have to find another way to include the centering point as the first item in the array while not allowing the marker to be visible.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
You already have this marker defined as the ninth item in the array. Why not just move it to the first position and the map will center on it?

{latitude: 49.925897,longitude: -97.20916,html: "2065 Logan Ave. Unit #7 Winnipeg, MB R2A0J1",popup: false},
0
 

Author Comment

by:COwebmaster
Comment Utility
Okay, moving that pin up to the first marker made it centered.  However, now the pin on the far right is now not visible.  I can't zoom out using something like 3.5?  the map breaks if I do.

http://genstoneproducts.seozones1.com/google-map.php
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Zooming to the bounds of all markers is so simple when you use the Google maps API directly. The Maps API has built-in methods to do everything you are trying to do here. I've never used gmap and now I know I never will. From my experience, this is a typical shortcoming of all jQuery plug-ins. They add a layer of abstraction on top of some other API and incorporate some features while ignoring others. And why should they incorporate all? Google has spent millions in R and D to get the Google Maps API to the full featured application it is. How could a single jquery programmer even begin to match that. My assessment is that gmap is for a web developer that wants to implement a simple map quickly, not for a developer who wants to customize as much as you do.

If you look here:

http://bouncingorange.com/blog/201202/zooming-gmap-views-show-content

You will see that the gmap plug-in does not natively provide for zooming to the bounds of all markers like the actual Maps API does using one simple function. There is a workaround at the link if you are interested, but it requires yet another plug-in.
0
 

Author Comment

by:COwebmaster
Comment Utility
0
 
LVL 7

Expert Comment

by:Atique Ansari
Comment Utility
Try the attached the code.

 $("#map").gMap({ markers: [
                                                {latitude: 49.925897,longitude: -97.20916,html: "<strong>Mitten Inc.</strong><br />2065 Logan Ave. Unit #7 Winnipeg, MB R2A0J1<br />Phone: 204-774-1580<br />Fax: 204-774-3843<br />Toll Free: 866-264-8023",popup: false},
                                                {latitude: 43.158992,longitude: -80.239709,html: "<strong>Mitten Inc.</strong><br />225 Henry St. Bldg #5 Brantford, ON N3S7R4<br />Phone: 519-753-1810<br />Fax: 866-264-1986<br />Toll Free: 800-265-2550",popup: false},
                                                {latitude: 42.93197,longitude: -81.167191,html: "<strong>Mitten Inc.</strong><br />3969 Commerce Rd. Unit #2 London, ON N6N1P5<br />Phone: 519-644-2675<br />Fax: 519-644-9069<br />Toll Free: 877-858-2675",popup: false},
                                                {latitude: 45.410886,longitude: -75.616381,html: "<strong>Mitten Inc.</strong><br />1290 Old Innes Rd. Unit #713 Ottawa, ON K1B5M6<br />Phone: 613-744-7548<br />Fax: 613-744-2578<br />Toll Free: 800-267-1550",popup: false},
                                                {latitude: 49.179353,longitude: -122.661947,html: "<strong>Mitten Inc.</strong><br />20215-97th Ave. Unit #1 Langley, BC V1M4B9<br />Phone: 778-383-1060<br />Fax: 866-575-1136<br />Toll Free: 800-566-8866",popup: false},
                                                {latitude: 53.494221,longitude: -113.453274,html: "<strong>Mitten Inc.</strong><br />8412 Davies Rd. Edmonton, AB T6E4Y5<br />Phone: 780-468-5222<br />Fax: 780-466-4965<br />Toll Free: 800-859-9472",popup: false},
                                                {latitude: 51.00526,longitude: -114.04511,html: "<strong>Mitten Inc.</strong><br />5622 Burleigh Cres. S. E. Unit #12 Calgary, AB T2H1Z8<br />Phone: 403-253-1988<br />Fax: 403-252-1970<br />Toll Free: 888-253-1944",popup: false},
                                                {latitude: 52.172471,longitude: -106.662526,html: "<strong>Mitten Inc.</strong><br />2750 Faithful Ave. Unit #303 Saskatoon, SK S7K6M6<br />Phone: 306-244-5777<br />Fax: 306-244-5779<br />Toll Free: 877-373-5777",popup: false},
                                                {latitude: 50.455139,longitude: -104.578531,html: "<strong>Mitten Inc.</strong><br />305 Dewdney Ave. Regina, SK S4N4G3<br />Phone: 306-545-7635<br />Fax: 866-871-3619<br />Toll Free: 877-643-4785",popup: false},
                                                {latitude: 45.663531,longitude: -73.888099,html: "<strong>Mitten Inc.</strong><br />880. Boul Michele-Bohec, Suite 103 Blainville, QC J7C5E2<br />Phone: 514-352-9555<br />Fax: 866-825-8403<br />Toll Free: 888-352-9555",popup: false},
                                                {latitude: 45.473882,longitude: -73.391226,html: "<strong>Mitten Inc.</strong><br />3405, 1ere Rue St.-Hubert, QC J3Y8Y6<br />Phone: 438-289-1901<br />Fax: 866-864-1473<br />Toll Free: 855-432-7185",popup: false},
                                                {latitude: 44.709191,longitude: -63.609564,html: "<strong>Mitten Inc.</strong><br />20 Gurholt Drive Dartmouth, NS B3B1L9<br />Phone: 902-468-3363<br />Fax: 902-468-5067<br />Toll Free: 888-565-3363",popup: false},
                                                {latitude: 45.92754,longitude: -66.722997,html: "<strong>Mitten Inc.</strong><br />20 Casewood Drive Hanwell, NB E3C2L5<br />Phone: 506-453-0888<br />Fax: 506-459-7591<br />Toll Free: 888-663-4040",popup: false},
                                                {latitude: 45.390142,longitude: -71.969207,html: "<strong>Procanna</strong><br />144 Rue Leger Sherbrooke, QC J1L1L9<br />Phone: 819-348-2695<br />Fax: 819-348-2699",popup: false},
                                                {latitude: 45.76036,longitude: -73.486638,html: "<strong>Procanna</strong><br />436 Rue St-Paul Le Gardeur, QC J5Z4H9<br />Phone: 450-654-0000<br />Fax: 450-654-0367 ",popup: false},
                                                {latitude: 47.5241,longitude: -52.84104,html: "<strong>Procanna</strong><br />48 Glencoe Drive Mount Pearl, NL A1N4S9<br />Phone: 709-368-4001<br />Fax: 709-368-1014",popup: false},
                                                {latitude: 46.091485,longitude: -64.84716,html: "<strong>Procanna</strong><br />215 English Drive Moncton, NB E1E3Y8<br />Phone: 506-858-8824<br />Fax: 506-858-0511",popup: false},
                                                {latitude: 44.712395,longitude: -63.609269,html: "<strong>Procanna</strong><br />10 Vidito Drive Dartmouth, NS B3B1P9<br />Phone: 902-468-6774<br />Fax: 902-468-9451",popup: false},
                                                {latitude: 45.272992,longitude: -66.007935,html: "<strong>Procanna</strong><br />855 Bayside Drive Saint John, NB E2R1A3<br />Phone: 506-634-0034<br />Fax: 506-634-7793",popup: false},
                                                {latitude: 53.582272,longitude: -113.534216,html: "<strong>Wayne Building Products</strong><br />12603 123rd St. NW Edmonton, AB T5L0H9<br />Phone: 780-455-8929<br />Fax: 780-452-1186<br />Toll Free: 800-763-6378",popup: false},
                                                {latitude: 51.085421,longitude: -114.034077,html: "<strong>Wayne Building Products</strong><br />1216-A 36 Avenue NE Calgary, AB T2E6M8<br />Phone: 403-250-5844<br />Fax: 403-250-5846<br />Toll Free: 800-892-4144",popup: false}
                                                ],
                                                zoom: 4,
                                                address: '2065 Logan Ave. Unit #7 Winnipeg, MB R2A0J1',
                                                controls:["GSmallMapControl", "GMapTypeControl"],
                                                scrollwheel: false
                                                });
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
If I use v3, would that help?  I saw this idea:
You are just proving my point, if you use the Maps API directly instead of this inadequate jquery overlay (gmap), getting all the markers in the view screen is very simple. But gmap is overriding many of the customizable features of the Maps API and forcing you to accept a generic map.
0
 
LVL 7

Expert Comment

by:Atique Ansari
Comment Utility
You can make the changes in gmap as well.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
Comment Utility
Go for it @atique_ansari. To me, it's not worth the trouble using gmap when Google Maps API  is so simple and full featured.

Here's how the same map would be scripted using Maps API v3 directly instead of gmap. AND there's so much more customization you can do.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB0Z7J8LHx-CK8j48l9-CExJTD4WlOMZ0Y&sensor=true" type="text/javascript"></script>
	<script type="text/javascript">
	var markers = [
        {latitude: 49.925897,longitude: -97.20916,html: "2065 Logan Ave. Unit #7 Winnipeg, MB R2A0J1",popup: false},
        {latitude: 43.158992,longitude: -80.239709,html: "<strong>Mitten Inc.</strong><br />225 Henry St. Bldg #5 Brantford, ON N3S7R4<br />Phone: 519-753-1810<br />Fax: 866-264-1986<br />Toll Free: 800-265-2550",popup: false},
        {latitude: 42.93197,longitude: -81.167191,html: "<strong>Mitten Inc.</strong><br />3969 Commerce Rd. Unit #2 London, ON N6N1P5<br />Phone: 519-644-2675<br />Fax: 519-644-9069<br />Toll Free: 877-858-2675",popup: false},
        {latitude: 45.410886,longitude: -75.616381,html: "1290 Old Innes Rd. Unit #713 Ottawa, ON K1B5M6",popup: false},
        {latitude: 49.179353,longitude: -122.661947,html: "20215-97th Ave. Unit #1 Langley, BC V1M4B9",popup: false},
        {latitude: 53.494221,longitude: -113.453274,html: "8412 Davies Rd. Edmonton, AB T6E4Y5",popup: false},
        {latitude: 51.00526,longitude: -114.04511,html: "5622 Burleigh Cres. S. E. Unit #12 Calgary, AB T2H1Z8",popup: false},
        {latitude: 52.172471,longitude: -106.662526,html: "2750 Faithful Ave. Unit #303 Saskatoon, SK S7K6M6",popup: false},
        {latitude: 50.455139,longitude: -104.578531,html: "305 Dewdney Ave. Regina, SK S4N4G3",popup: false},
        {latitude: 45.663531,longitude: -73.888099,html: "880. Boul Michele-Bohec, Suite 103 Blainville, QC J7C5E2",popup: false},
        {latitude: 45.473882,longitude: -73.391226,html: "3405, 1ere Rue St.-Hubert, QC J3Y8Y6",popup: false},
        {latitude: 44.709191,longitude: -63.609564,html: "20 Gurholt Drive Dartmouth, NS B3B1L9",popup: false},
        {latitude: 45.92754,longitude: -66.722997,html: "20 Casewood Drive Hanwell, NB E3C2L5",popup: false},
        {latitude: 45.390142,longitude: -71.969207,html: "144 Rue Leger Sherbrooke, QC J1L1L9",popup: false},
        {latitude: 45.76036,longitude: -73.486638,html: "436 Rue St-Paul Le Gardeur, QC J5Z4H9",popup: false},
        {latitude: 47.5241,longitude: -52.84104,html: "48 Glencoe Drive Mount Pearl, NL A1N4S9",popup: false},
        {latitude: 46.091485,longitude: -64.84716,html: "215 English Drive Moncton, NB E1E3Y8",popup: false},
        {latitude: 44.712395,longitude: -63.609269,html: "10 Vidito Drive Dartmouth, NS B3B1P9",popup: false},
        {latitude: 45.272992,longitude: -66.007935,html: "855 Bayside Drive Saint John, NB E2R1A3",popup: false},
        {latitude: 53.582272,longitude: -113.534216,html: "12603 123rd St. NW Edmonton, AB T5L0H9",popup: false},
        {latitude: 51.085421,longitude: -114.034077,html: "1216-A 36 Avenue NE Calgary, AB T2E6M8",popup: false}];
	function initialize() {
        var ccLoc = new google.maps.LatLng(50,-90);
        var ccOptions = {
            zoom: 4,
            center: ccLoc,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        }
        map = new google.maps.Map(document.getElementById("map"), ccOptions);
        for(i=0; i<markers.length; i++){        
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(markers[i]['latitude'], markers[i]['longitude'])                
            });
            var infowindow = new google.maps.InfoWindow({
                position: new google.maps.LatLng(markers[i]['latitude'] , markers[i]['longitude'])
            }); 
            bindInfoW(marker, markers[i]['html'], infowindow);
            marker.setMap(map);
        }
    }
    function bindInfoW(marker, contentString, infowindow)
    {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
    }
	</script>
<style type="text/css">
#map {
height: 400px;
width: 920px;
border: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" onload="initialize();">
<div id="map"></div>
</body>
</html>

Open in new window


NOTE: This code will not work as written without updating your license key to version 3, but that is simple enough to do.
0
 

Author Closing Comment

by:COwebmaster
Comment Utility
Okay, that works great tommyBoy.  I switched over to V3 and each pin now displays. Thanks for your help!
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
v3 should have been my first suggestion, but hey, I learned something too about gmap, i.e. stay clear!

Thanks for the points.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now