Rectangle 27 40

Below you can find a basic example of using the Google Maps directions service in a jQuery Mobile page.

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery mobile with Google maps geo directions example</title>
        <meta content="en" http-equiv="content-language">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">
            $(document).on("pageinit", "#map_page", function() {
                initialize();
            });

            $(document).on('click', '#submit', function(e) {
                e.preventDefault();
                calculateRoute();
            });

            var directionDisplay,
                directionsService = new google.maps.DirectionsService(),
                map;

            function initialize() 
            {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);

                var myOptions = {
                    zoom:10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: mapCenter
                }

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("directions"));  
            }

            function calculateRoute() 
            {
                var selectedMode = $("#mode").val(),
                    start = $("#from").val(),
                    end = $("#to").val();

                if(start == '' || end == '')
                {
                    // cannot calculate route
                    $("#results").hide();
                    return;
                }
                else
                {
                    var request = {
                        origin:start, 
                        destination:end,
                        travelMode: google.maps.DirectionsTravelMode[selectedMode]
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response); 
                            $("#results").show();
                            /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                    alert(myRoute.steps[i].instructions);
                                }
                            */
                        }
                        else {
                            $("#results").hide();
                        }
                    });

                }
            }
        </script>
    </head>
    <body>
        <div data-role="page" id="map_page">
            <div data-role="header">
                <h1><a href="#">jQuery mobile - Google maps directions service</h1>
            </div>
            <div data-role="content">
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:300px;"></div>
                    <div data-role="fieldcontain">
                        <label for="from">From</label> 
                        <input type="text" id="from" value="Goteborg, Sweden"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="to">To</label> 
                        <input type="text" id="to" value="Stockholm, Sweden"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="mode" class="select">Transportation method:</label>
                        <select name="select-choice-0" id="mode">
                            <option value="DRIVING">Driving</option>
                            <option value="WALKING">Walking</option>
                            <option value="BICYCLING">Bicycling</option>
                        </select>
                    </div>
                    <a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
                </div>
                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>
    </body>
</html>

The below example uses the current position which is automatically located and a target destination address which is given from the user.

The below example locates the current position and it automatically calculates the distance and displays the route details between the current location and a static predefined destination location.

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">

            var map,
                currentPosition,
                directionsDisplay, 
                directionsService,
                destinationLatitude = 59.3426606750,
                destinationLongitude = 18.0736160278;

            function initializeMapAndCalculateRoute(lat, lon)
            {
                directionsDisplay = new google.maps.DirectionsRenderer(); 
                directionsService = new google.maps.DirectionsService();

                currentPosition = new google.maps.LatLng(lat, lon);

                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 15,
                   center: currentPosition,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });

                directionsDisplay.setMap(map);

                 var currentPositionMarker = new google.maps.Marker({
                    position: currentPosition,
                    map: map,
                    title: "Current position"
                });

                // current position marker info
                /*
                var infowindow = new google.maps.InfoWindow();
                google.maps.event.addListener(currentPositionMarker, 'click', function() {
                    infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon);
                    infowindow.open(map, currentPositionMarker);
                });
                */

                // calculate Route
                calculateRoute();
            }

            function locError(error) {
               // the current position could not be located
            }

            function locSuccess(position) {
                // initialize map with current position and calculate the route
                initializeMapAndCalculateRoute(position.coords.latitude, position.coords.longitude);
            }

            function calculateRoute() {

                var targetDestination =  new google.maps.LatLng(destinationLatitude, destinationLongitude);
                if (currentPosition != '' && targetDestination != '') {

                    var request = {
                        origin: currentPosition, 
                        destination: targetDestination,
                        travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setPanel(document.getElementById("directions"));
                            directionsDisplay.setDirections(response); 

                            /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                    alert(myRoute.steps[i].instructions);
                                }
                            */
                            $("#results").show();
                        }
                        else {
                            $("#results").hide();
                        }
                    });
                }
                else {
                    $("#results").hide();
                }
            }

            $(document).live("pagebeforeshow", "#map_page", function() {
                // find current position and on success initialize map and calculate the route
                navigator.geolocation.getCurrentPosition(locSuccess, locError);
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a></h1>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>      
    </body>
</html>

Thanks this is a cleaner example than the ones provided on the site thx. But the problem is this still has no directions **based on the current location (gps on iphone for example ) so I cannot flag it as the correct answer. I try to build upon your example and add the geo stuff

thanks so much, really messed around with this but google maps can be tricky to get working. Only 1 last problem i have, I would like to have directions calculated after user gives his location. Would you know how to do that too? I removed the directions input field and button and set the value of destination hardcoded in the js. Final step would be to have it calc the directions after the user gives his current location

@Rubytastic You're welcome :) You want to have a static destination location and the map should calculate the distance and the route details between the current position and the static destination location, right? I have updated my answer with a corresponding example.

Noticed there are no maps displayed if you do not share your location, would that be something to could be fixed for the sake of completeness? Do you have an idea how to do it?

clean example of directions with google maps in jquery mobile? - Stack...

jquery google-maps jquery-mobile google-maps-api-3
Rectangle 27 7

I abandoned the plugins and went with the google maps shortcode that has been released for the theme I'm using. While I lose the custom markers functionality, the theme developers were finally able to help get this all working. They added the following code to the shortcode PHP file.

jQuery('ul.tabs_framed').data('tabs').onClick(function(e,index) {
    resizeMap(" . 'map'.$map_id .") 
});
function resizeMap(m) {
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
};

This code triggers a map reload when the tab containing the map is clicked. It also recenters the map. This solution solved the problem for me and the google maps now display in the jquery tabs. Hopefully some of the more javascript-savvy users here (and plugin developers!!!) can adapt this solution to their own maps-in-tabs issues.

Google Maps Not Working in jQuery Tabs - Stack Overflow

jquery google-maps google-maps-api-3 tabs jquery-tabs
Rectangle 27 7

I abandoned the plugins and went with the google maps shortcode that has been released for the theme I'm using. While I lose the custom markers functionality, the theme developers were finally able to help get this all working. They added the following code to the shortcode PHP file.

jQuery('ul.tabs_framed').data('tabs').onClick(function(e,index) {
    resizeMap(" . 'map'.$map_id .") 
});
function resizeMap(m) {
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
};

This code triggers a map reload when the tab containing the map is clicked. It also recenters the map. This solution solved the problem for me and the google maps now display in the jquery tabs. Hopefully some of the more javascript-savvy users here (and plugin developers!!!) can adapt this solution to their own maps-in-tabs issues.

Google Maps Not Working in jQuery Tabs - Stack Overflow

jquery google-maps google-maps-api-3 tabs jquery-tabs
Rectangle 27 4

I don't think you need it for loading libraries such as jQuery, but the same loader is used for several other APIs such as Google Maps, which may require a valid API key.

Also, this is what Google has to say about using a key:

The API key costs nothing, and allows us to contact you directly if we detect an issue with your site.

javascript - Is it essential to use a developer key in Google Jsapi ca...

javascript jquery jsapi
Rectangle 27 5

If you using jQuery in your AngularJS app, check out this function which returns a promise for when the Google Maps API has been loaded:

I was able to use this in a AngularJS directive to lazy-load Google Maps on demand. Works a treat:

angular.module('mapModule') // usage: data-google-map
    .directive('googleMap', ['$window', function ($window) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                // If Google maps is already present then just initialise my map
                if ($window.google && $window.google.maps) {
                    initGoogleMaps();
                } else {
                    loadGoogleMapsAsync();
                }

                function loadGoogleMapsAsync() {
                    // loadGoogleMaps() == jQuery function from https://gist.github.com/gbakernet/828536
                    $.when(loadGoogleMaps())
                        // When Google maps is loaded, add InfoBox - this is optional
                        .then(function () {
                            $.ajax({ url: "/resources/js/infobox.min.js", dataType: "script", async: false });
                        })
                        .done(function () {
                            initGoogleMaps();
                        });
                };

                function initGoogleMaps() {
                    // Load your Google map stuff here
                    // Remember to wrap scope variables inside `scope.$apply(function(){...});`
                }
            }
        };
    }]);

@Beetroot-Beetroot Bet your ass I did! Currently there's no easy way to load scripts with AngularJS and the Google Maps API doesn't support promises natively. I've proposed a more than adequate solution; if you've got a better one then lets see it! :)

GFoley, I take your point and I didn't say this wasn't rational, I just said "eek". I've not tried but can AngularJS's $q not coerce jQuery promises into its own as per Q.js? If so, then in loadGoogleMapsAsync(), all but the $.ajax(...) expression can be written with $q, which seems more appropriate in an Angular.js module.

Also, should you not return $ajax(...)? Otherwise (a) initGoogleMaps() might as well be inside the .then() callback, and (b) the user could start interacting with the map before infobox is available.

@Beetroot-Beetroot I've not used $q at all as I'm still new to Angular though I'd imagine you could easily switch it out, yeah. Feel free to update my answer above if you find a working solution. As for your a & b, that's getting off topic.

asynchronous - How to asynchronously load a google map in AngularJS? -...

google-maps-api-3 asynchronous angularjs lazy-loading angularjs-directive
Rectangle 27 1

I had the same issue. i was using google maps in Jquery Accordion and when i expand the div the map only consisted a grayed area. I was able to solve this issue by triggering a click event on the specified accordion heading and setting the map container to visible.

<script type="text/javascript">
    var map;

    function initMap(lat, lng) {
        var myCenter = new google.maps.LatLng(lat, lng);

        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: myCenter
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

    }
    function ViewMap() {
        var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333
        $("#showmap").show();
        // Sorry for mixing up Jquery and javascript.
        initMap(latlng[0], latlng[1]);
    }

</script>
<h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3>
<div style="height:auto" id="showmap">
   <div id="map" style="width: 850px; height: 550px; overflow: visible"></div>
</div>

Google Maps API v3: Gray Box, no map - Stack Overflow

google-maps
Rectangle 27 3

The simplest way to do it is by using a pseudo-element like :before or :after. This method will not require any additional html elements or jquery. If we have for instance this html structure:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Then all we need to do is make the wrapper relative to the pseudo-element we will create to prevent the scrolling

.map_wraper{
    position:relative;
}

After this we will create the pseudo-element that will be positioned over the map therefor preventing the scrolling:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

And you're done, no jquery no extra html elements! Here is a working jsfiddle example: http://jsfiddle.net/e6j4Lbe1/

Clever idea. However, like some of the other answers, this captures everything, not just mousewheel events.

scrollwheel - Disable mouse scroll wheel zoom on embedded Google Maps ...

google-maps scrollwheel
Rectangle 27 3

The simplest way to do it is by using a pseudo-element like :before or :after. This method will not require any additional html elements or jquery. If we have for instance this html structure:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Then all we need to do is make the wrapper relative to the pseudo-element we will create to prevent the scrolling

.map_wraper{
    position:relative;
}

After this we will create the pseudo-element that will be positioned over the map therefor preventing the scrolling:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

And you're done, no jquery no extra html elements! Here is a working jsfiddle example: http://jsfiddle.net/e6j4Lbe1/

Clever idea. However, like some of the other answers, this captures everything, not just mousewheel events.

scrollwheel - Disable mouse scroll wheel zoom on embedded Google Maps ...

google-maps scrollwheel
Rectangle 27 3

The simplest way to do it is by using a pseudo-element like :before or :after. This method will not require any additional html elements or jquery. If we have for instance this html structure:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Then all we need to do is make the wrapper relative to the pseudo-element we will create to prevent the scrolling

.map_wraper{
    position:relative;
}

After this we will create the pseudo-element that will be positioned over the map therefor preventing the scrolling:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

And you're done, no jquery no extra html elements! Here is a working jsfiddle example: http://jsfiddle.net/e6j4Lbe1/

Clever idea. However, like some of the other answers, this captures everything, not just mousewheel events.

scrollwheel - Disable mouse scroll wheel zoom on embedded Google Maps ...

google-maps scrollwheel
Rectangle 27 3

The simplest way to do it is by using a pseudo-element like :before or :after. This method will not require any additional html elements or jquery. If we have for instance this html structure:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Then all we need to do is make the wrapper relative to the pseudo-element we will create to prevent the scrolling

.map_wraper{
    position:relative;
}

After this we will create the pseudo-element that will be positioned over the map therefor preventing the scrolling:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

And you're done, no jquery no extra html elements! Here is a working jsfiddle example: http://jsfiddle.net/e6j4Lbe1/

Clever idea. However, like some of the other answers, this captures everything, not just mousewheel events.

scrollwheel - Disable mouse scroll wheel zoom on embedded Google Maps ...

google-maps scrollwheel
Rectangle 27 9

I'm assuming you mean you want to display the map using the google map v3 api. You could use this as a starting point.

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <div id="map" style="width: 500px; height: 400px;"></div>
var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

In case you are looking for a jQuery plugin, I would suggest GMAP3.

jquery - how to display multiple locations on google maps in my web ap...

jquery asp.net
Rectangle 27 3

Using the jQuery Google Maps plugin is was having the same issue with jQuery UI tabs.

The map is created like this:

$("#google-map").googlemap({
    controls: false,
    labels: true,
    zoom: 9,
    latitude: 51.5,
    longitude: 0,
    debug: false
});

It was solved very easily (but not quickly) by calling

$("#google-map").googlemap().getMap().checkResize();

After the map div is displayed. I have tested this on FF and Safari, in addition

resizeTo(screen.width, screen.height);

Works in FF but not IE or Safari.

css - Google map + jQuery: rendering bug - Stack Overflow

jquery css jquery-ui google-maps
Rectangle 27 3

Using the jQuery Google Maps plugin is was having the same issue with jQuery UI tabs.

The map is created like this:

$("#google-map").googlemap({
    controls: false,
    labels: true,
    zoom: 9,
    latitude: 51.5,
    longitude: 0,
    debug: false
});

It was solved very easily (but not quickly) by calling

$("#google-map").googlemap().getMap().checkResize();

After the map div is displayed. I have tested this on FF and Safari, in addition

resizeTo(screen.width, screen.height);

Works in FF but not IE or Safari.

css - Google map + jQuery: rendering bug - Stack Overflow

jquery css jquery-ui google-maps
Rectangle 27 3

Using the jQuery Google Maps plugin is was having the same issue with jQuery UI tabs.

The map is created like this:

$("#google-map").googlemap({
    controls: false,
    labels: true,
    zoom: 9,
    latitude: 51.5,
    longitude: 0,
    debug: false
});

It was solved very easily (but not quickly) by calling

$("#google-map").googlemap().getMap().checkResize();

After the map div is displayed. I have tested this on FF and Safari, in addition

resizeTo(screen.width, screen.height);

Works in FF but not IE or Safari.

css - Google map + jQuery: rendering bug - Stack Overflow

jquery css jquery-ui google-maps
Rectangle 27 1

Using the code from Google Maps click event on route, with a modification to allow it to create multiple routes rather than update a single route (make the declaration of polylines local to renderDirectionsPolylines, and add the color and course arguments):

function renderDirectionsPolylines(response, color, course) {
  var polylines = [];
  polylineOptions.strokeColor = color;
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
      }
      stepPolyline.setMap(map);
      polylines.push(stepPolyline);
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on "+course+"<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      });
    }
  }
}
function busMaps() {
  var directionsService = new google.maps.DirectionsService;
  // var places = new google.maps.places.PlacesService(map);
  var infowindow = new google.maps.InfoWindow();

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 51.846437,
      lng: -1.210338
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      stylers: [{
        saturation: -100
      }]
    }]
  });

  var myCoords = {
    route1: [
      new google.maps.LatLng(52.068903, -1.260588),
      new google.maps.LatLng(52.027057, -1.149292),
      new google.maps.LatLng(51.996436, -1.162611),
      new google.maps.LatLng(51.997970, -1.209802),
      new google.maps.LatLng(51.994775, -1.251997),
      new google.maps.LatLng(52.017494, -1.309684),
      new google.maps.LatLng(51.981498, -1.321367),
      new google.maps.LatLng(51.954807, -1.318343),
      new google.maps.LatLng(51.924264, -1.324991),
      new google.maps.LatLng(51.854053, -1.317165),
      new google.maps.LatLng(51.816201, -1.279594)

    ],
    route2: [
      new google.maps.LatLng(51.904426, -1.059206),
      new google.maps.LatLng(51.896698, -1.150888),
      new google.maps.LatLng(51.872638, -1.185954),
      new google.maps.LatLng(51.846437, -1.210338),
      new google.maps.LatLng(51.824472, -1.239081),
      new google.maps.LatLng(51.796790, -1.182005),
      new google.maps.LatLng(51.793961, -1.175405),
      new google.maps.LatLng(51.757714, -1.221619),
      new google.maps.LatLng(51.760187, -1.224629),
      new google.maps.LatLng(51.748485, -1.245116),
      new google.maps.LatLng(51.767480, -1.259988),
      new google.maps.LatLng(51.769385, -1.262244),
      new google.maps.LatLng(51.773602, -1.259178),
      new google.maps.LatLng(51.769385, -1.262244)
    ],
    route3: [
      new google.maps.LatLng(51.770860, -0.942120),
      new google.maps.LatLng(51.757360, -0.975366),
      new google.maps.LatLng(51.772137, -0.995936),
      new google.maps.LatLng(51.779836, -1.011279),
      new google.maps.LatLng(51.771619, -1.068480),
      new google.maps.LatLng(51.747970, -1.129057),
      new google.maps.LatLng(51.761746, -1.181807),
      new google.maps.LatLng(51.757714, -1.221619),
      new google.maps.LatLng(51.760187, -1.224629),
      new google.maps.LatLng(51.748485, -1.245116),
      new google.maps.LatLng(51.767480, -1.259988),
      new google.maps.LatLng(51.769385, -1.262244),
      new google.maps.LatLng(51.773602, -1.259178),
      new google.maps.LatLng(51.769363, -1.262420),
    ],
    route4: [
      new google.maps.LatLng(51.424203, -0.976910),
      new google.maps.LatLng(51.424088, -0.930640),
      new google.maps.LatLng(51.453720, -0.905135),
      new google.maps.LatLng(51.537599, -0.903588),
      new google.maps.LatLng(51.605565, -0.960766),
      new google.maps.LatLng(51.576115, -0.989035),
      new google.maps.LatLng(51.560421, -0.951550),
      new google.maps.LatLng(51.676793, -0.964094),
      new google.maps.LatLng(51.757714, -1.221619),
      new google.maps.LatLng(51.760187, -1.224629),
      new google.maps.LatLng(51.767480, -1.259988),
      new google.maps.LatLng(51.769385, -1.262244),
      new google.maps.LatLng(51.773602, -1.259178),
      new google.maps.LatLng(51.769363, -1.262420),
      new google.maps.LatLng(51.748485, -1.245116)
    ]
  };

  var routesOptions = {
    route1: {
      color: '#70cc23'
    },
    route2: {
      color: '#41444b'
    },
    route3: {
      color: '#016a31'
    },
    route4: {
      color: '#ffd900'
    }
  };

  var renderer = new google.maps.DirectionsRenderer({
    suppressPolylines: true,
    suppressMarkers: true,
    infoWindow: infowindow,
    polylineOptions: {
      strokeColor: '#C83939',
      strokeOpacity: 0,
      strokeWeight: 1,
      icons: [{
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: '#C83939',
          scale: 3,
          strokeOpacity: 1
        },
        offset: '0',
        repeat: '15px'
      }]
    }

  });

  function renderDirections(result, color, course) {
    renderer.setDirections(result);
    renderer.setMap(map);
    renderDirectionsPolylines(result, color, course);
    console.log(renderer.getDirections());
  }
  var polylineOptions = {
    strokeColor: '#C83939',
    strokeOpacity: 1,
    strokeWeight: 4
  };

  function renderDirectionsPolylines(response, color, course) {
    var polylines = [];
    polylineOptions.strokeColor = color;
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      var steps = legs[i].steps;
      for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        var stepPolyline = new google.maps.Polyline(polylineOptions);
        for (k = 0; k < nextSegment.length; k++) {
          stepPolyline.getPath().push(nextSegment[k]);
        }
        stepPolyline.setMap(map);
        polylines.push(stepPolyline);
        google.maps.event.addListener(stepPolyline, 'click', function(evt) {
          infowindow.setContent("you clicked on " + course + "<br>" + evt.latLng.toUrlValue(6));
          infowindow.setPosition(evt.latLng);
          infowindow.open(map);
        })
      }
    }
  }

  function drawMarkers(position, color, course) {

    var marker = new google.maps.Marker({
      position: position,
      clickable: true,
      title: 'Click to open ' + course,
      label: {
        text: course,
        fontSize: "0px"
      },
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 5,
        fillColor: color,
        fillOpacity: 1,
        strokeWeight: 0,
        image: ''
      },
      map: map
    });

    redirectTo(marker, marker.label.text);
  }

  function buildPath(origin, destination, wayPoints, color, route) {
    directionsService.route({
        origin: origin,
        destination: destination,
        waypoints: wayPoints,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      },
      function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          renderDirections(result, color, route);
        }
      });
    var labelPosition = setLabelPosition(route);
    console.log(labelPosition, 'labelPosition');
  }

  function redirectTo(element, identifier) {
    google.maps.event.addListener(element, 'click', function(evt) {
      switch (identifier) {
        case 'route1':
          alert('click route 1');
          break;
        case 'route2':
          alert('click route 2');
          break;
        case 'route3':
          alert('click route 3');
          break;
        case 'route4':
          alert('click route 4');
          break;
      }
    })
  };

  function setLabelPosition(course) {
    switch (course) {
      case 'route1':
        return 'labelAnchor: new google.maps.Point(90,20))';
        break;
      case 'route2':
        return '0, 0';
        break;
      case 'route3':
        return '0, 0';
        break;
    }
  }

  Object.keys(myCoords).forEach(function(key) {
    var curentOrigin = myCoords[key][0],
      curentDestination = myCoords[key][myCoords[key].length - 1],
      wayPoints = [],
      color = routesOptions[key].color;
    for (var j = 1; j < myCoords[key].length - 1; j++) {
      wayPoints.push({
        location: myCoords[key][j],
        stopover: true
      });
      if (j === myCoords[key].length - 2) {
        console.log(curentOrigin)
        buildPath(curentOrigin, curentDestination, wayPoints, color, key);
      }
    }
    for (var j = 0; j < myCoords[key].length; j++) {
      drawMarkers(myCoords[key][j], color, key);
    }
  });

  var center;

  function calculateCenter() {
    center = map.getCenter();
  }

  google.maps.event.addListenerOnce(map, 'idle', function() {
    $('.infoMarker').append('<span class="close-btn"></span><div class="routes-icon"></div>');
    map.setZoom(9);
    calculateCenter();
    if ($('body').hasClass('routes')) {
      $('.media-holder .main-loading-overlay').fadeOut();
    }
  });

  google.maps.event.addDomListener(window, 'resize', function() {
    console.log('center');
    setTimeout(function() {
      map.setCenter(center);
    }, 100);
  });

  google.maps.event.addDomListener(window, 'scroll', function() {
    console.log('center');
    setTimeout(function() {
      map.setCenter(center);
    }, 100);
  });
}
google.maps.event.addDomListener(window, 'load', function() {
  busMaps();
});
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVBU8xYg4ulXg3HkO7hMjEPKTLVpsUgh0"></script>

javascript - Click event to multiple google maps routes - Stack Overfl...

javascript jquery google-maps
Rectangle 27 1

Using the code from Google Maps click event on route, with a modification to allow it to create multiple routes rather than update a single route (make the declaration of polylines local to renderDirectionsPolylines, and add the color and course arguments):

function renderDirectionsPolylines(response, color, course) {
  var polylines = [];
  polylineOptions.strokeColor = color;
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
      }
      stepPolyline.setMap(map);
      polylines.push(stepPolyline);
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on "+course+"<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      });
    }
  }
}
function busMaps() {
  var directionsService = new google.maps.DirectionsService;
  // var places = new google.maps.places.PlacesService(map);
  var infowindow = new google.maps.InfoWindow();

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 51.846437,
      lng: -1.210338
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      stylers: [{
        saturation: -100
      }]
    }]
  });

  var myCoords = {
    route1: [
      new google.maps.LatLng(52.068903, -1.260588),
      new google.maps.LatLng(52.027057, -1.149292),
      new google.maps.LatLng(51.996436, -1.162611),
      new google.maps.LatLng(51.997970, -1.209802),
      new google.maps.LatLng(51.994775, -1.251997),
      new google.maps.LatLng(52.017494, -1.309684),
      new google.maps.LatLng(51.981498, -1.321367),
      new google.maps.LatLng(51.954807, -1.318343),
      new google.maps.LatLng(51.924264, -1.324991),
      new google.maps.LatLng(51.854053, -1.317165),
      new google.maps.LatLng(51.816201, -1.279594)

    ],
    route2: [
      new google.maps.LatLng(51.904426, -1.059206),
      new google.maps.LatLng(51.896698, -1.150888),
      new google.maps.LatLng(51.872638, -1.185954),
      new google.maps.LatLng(51.846437, -1.210338),
      new google.maps.LatLng(51.824472, -1.239081),
      new google.maps.LatLng(51.796790, -1.182005),
      new google.maps.LatLng(51.793961, -1.175405),
      new google.maps.LatLng(51.757714, -1.221619),
      new google.maps.LatLng(51.760187, -1.224629),
      new google.maps.LatLng(51.748485, -1.245116),
      new google.maps.LatLng(51.767480, -1.259988),
      new google.maps.LatLng(51.769385, -1.262244),
      new google.maps.LatLng(51.773602, -1.259178),
      new google.maps.LatLng(51.769385, -1.262244)
    ],
    route3: [
      new google.maps.LatLng(51.770860, -0.942120),
      new google.maps.LatLng(51.757360, -0.975366),
      new google.maps.LatLng(51.772137, -0.995936),
      new google.maps.LatLng(51.779836, -1.011279),
      new google.maps.LatLng(51.771619, -1.068480),
      new google.maps.LatLng(51.747970, -1.129057),
      new google.maps.LatLng(51.761746, -1.181807),
      new google.maps.LatLng(51.757714, -1.221619),
      new google.maps.LatLng(51.760187, -1.224629),
      new google.maps.LatLng(51.748485, -1.245116),
      new google.maps.LatLng(51.767480, -1.259988),
      new google.maps.LatLng(51.769385, -1.262244),
      new google.maps.LatLng(51.773602, -1.259178),
      new google.maps.LatLng(51.769363, -1.262420),
    ],
    route4: [
      new google.maps.LatLng(51.424203, -0.976910),
      new google.maps.LatLng(51.424088, -0.930640),
      new google.maps.LatLng(51.453720, -0.905135),
      new google.maps.LatLng(51.537599, -0.903588),
      new google.maps.LatLng(51.605565, -0.960766),
      new google.maps.LatLng(51.576115, -0.989035),
      new google.maps.LatLng(51.560421, -0.951550),
      new google.maps.LatLng(51.676793, -0.964094),
      new google.maps.LatLng(51.757714, -1.221619),
      new google.maps.LatLng(51.760187, -1.224629),
      new google.maps.LatLng(51.767480, -1.259988),
      new google.maps.LatLng(51.769385, -1.262244),
      new google.maps.LatLng(51.773602, -1.259178),
      new google.maps.LatLng(51.769363, -1.262420),
      new google.maps.LatLng(51.748485, -1.245116)
    ]
  };

  var routesOptions = {
    route1: {
      color: '#70cc23'
    },
    route2: {
      color: '#41444b'
    },
    route3: {
      color: '#016a31'
    },
    route4: {
      color: '#ffd900'
    }
  };

  var renderer = new google.maps.DirectionsRenderer({
    suppressPolylines: true,
    suppressMarkers: true,
    infoWindow: infowindow,
    polylineOptions: {
      strokeColor: '#C83939',
      strokeOpacity: 0,
      strokeWeight: 1,
      icons: [{
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: '#C83939',
          scale: 3,
          strokeOpacity: 1
        },
        offset: '0',
        repeat: '15px'
      }]
    }

  });

  function renderDirections(result, color, course) {
    renderer.setDirections(result);
    renderer.setMap(map);
    renderDirectionsPolylines(result, color, course);
    console.log(renderer.getDirections());
  }
  var polylineOptions = {
    strokeColor: '#C83939',
    strokeOpacity: 1,
    strokeWeight: 4
  };

  function renderDirectionsPolylines(response, color, course) {
    var polylines = [];
    polylineOptions.strokeColor = color;
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      var steps = legs[i].steps;
      for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        var stepPolyline = new google.maps.Polyline(polylineOptions);
        for (k = 0; k < nextSegment.length; k++) {
          stepPolyline.getPath().push(nextSegment[k]);
        }
        stepPolyline.setMap(map);
        polylines.push(stepPolyline);
        google.maps.event.addListener(stepPolyline, 'click', function(evt) {
          infowindow.setContent("you clicked on " + course + "<br>" + evt.latLng.toUrlValue(6));
          infowindow.setPosition(evt.latLng);
          infowindow.open(map);
        })
      }
    }
  }

  function drawMarkers(position, color, course) {

    var marker = new google.maps.Marker({
      position: position,
      clickable: true,
      title: 'Click to open ' + course,
      label: {
        text: course,
        fontSize: "0px"
      },
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 5,
        fillColor: color,
        fillOpacity: 1,
        strokeWeight: 0,
        image: ''
      },
      map: map
    });

    redirectTo(marker, marker.label.text);
  }

  function buildPath(origin, destination, wayPoints, color, route) {
    directionsService.route({
        origin: origin,
        destination: destination,
        waypoints: wayPoints,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      },
      function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          renderDirections(result, color, route);
        }
      });
    var labelPosition = setLabelPosition(route);
    console.log(labelPosition, 'labelPosition');
  }

  function redirectTo(element, identifier) {
    google.maps.event.addListener(element, 'click', function(evt) {
      switch (identifier) {
        case 'route1':
          alert('click route 1');
          break;
        case 'route2':
          alert('click route 2');
          break;
        case 'route3':
          alert('click route 3');
          break;
        case 'route4':
          alert('click route 4');
          break;
      }
    })
  };

  function setLabelPosition(course) {
    switch (course) {
      case 'route1':
        return 'labelAnchor: new google.maps.Point(90,20))';
        break;
      case 'route2':
        return '0, 0';
        break;
      case 'route3':
        return '0, 0';
        break;
    }
  }

  Object.keys(myCoords).forEach(function(key) {
    var curentOrigin = myCoords[key][0],
      curentDestination = myCoords[key][myCoords[key].length - 1],
      wayPoints = [],
      color = routesOptions[key].color;
    for (var j = 1; j < myCoords[key].length - 1; j++) {
      wayPoints.push({
        location: myCoords[key][j],
        stopover: true
      });
      if (j === myCoords[key].length - 2) {
        console.log(curentOrigin)
        buildPath(curentOrigin, curentDestination, wayPoints, color, key);
      }
    }
    for (var j = 0; j < myCoords[key].length; j++) {
      drawMarkers(myCoords[key][j], color, key);
    }
  });

  var center;

  function calculateCenter() {
    center = map.getCenter();
  }

  google.maps.event.addListenerOnce(map, 'idle', function() {
    $('.infoMarker').append('<span class="close-btn"></span><div class="routes-icon"></div>');
    map.setZoom(9);
    calculateCenter();
    if ($('body').hasClass('routes')) {
      $('.media-holder .main-loading-overlay').fadeOut();
    }
  });

  google.maps.event.addDomListener(window, 'resize', function() {
    console.log('center');
    setTimeout(function() {
      map.setCenter(center);
    }, 100);
  });

  google.maps.event.addDomListener(window, 'scroll', function() {
    console.log('center');
    setTimeout(function() {
      map.setCenter(center);
    }, 100);
  });
}
google.maps.event.addDomListener(window, 'load', function() {
  busMaps();
});
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVBU8xYg4ulXg3HkO7hMjEPKTLVpsUgh0"></script>

javascript - Click event to multiple google maps routes - Stack Overfl...

javascript jquery google-maps
Rectangle 27 2

Since it looks like you're headed down the route of including a lot of information in your info windows, you might benefit more from pursuing the route of building your own custom info windows. They have a great example up at http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html . I noticed you have jquery on your page as well, you might even benefit from looking at this post on how to integrate jQuery UI using Google's "InfoBox" extension - http://thewebstorebyg.wordpress.com/2012/10/24/google-maps-api-v3-tabs-inside-the-infowindow-using-infobox/

javascript - Why Google Map infowindow has a scrollbar - Stack Overflo...

javascript jquery html css google-maps
Rectangle 27 2

Since it looks like you're headed down the route of including a lot of information in your info windows, you might benefit more from pursuing the route of building your own custom info windows. They have a great example up at http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html . I noticed you have jquery on your page as well, you might even benefit from looking at this post on how to integrate jQuery UI using Google's "InfoBox" extension - http://thewebstorebyg.wordpress.com/2012/10/24/google-maps-api-v3-tabs-inside-the-infowindow-using-infobox/

javascript - Why Google Map infowindow has a scrollbar - Stack Overflo...

javascript jquery html css google-maps
Rectangle 27 1

There are two ways of solving that one with jquery another using old skool javascript onclick.

In the jQuery method binding the event AFTER the info window is shown and the element created seems to solve the problem:

<!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></title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
        </script>
        <style type="text/css">
            #gmap {
                height: 450px;
                width: 350px;
            }


        </style>
        <script type="text/javascript">
            var gmap;
            var sampleLatLon = new GLatLng(37.4419, -122.1419);
            var sampleIcon = new GIcon(G_DEFAULT_ICON);

            $(document).ready(function(){

                // Google maps setup
                $(window).unload(function(){
                    GUnload();
                });
                var gmap = new GMap2(document.getElementById("gmap"));
                gmap.setCenter(sampleLatLon, 13);
                gmap.setUIToDefault();

                // Marker and InfoWindow setup
                var marker = new GMarker(sampleLatLon, {
                    icon: sampleIcon
                });

                //marker.bindInfoWindowHtml(infoWindowMarkup);

                GEvent.addListener(marker, "click", function(){
                    var infoWindowMarkup = '<div class="container"><a id="infowindow-1" class="clickeventvialive">click me</a></div>';
                    gmap.openInfoWindowHtml(sampleLatLon, infoWindowMarkup, {
                        "onOpenFn": function(){
                         $(".clickeventvialive").bind("click", function (){alert("hello")});
                        }
                    });

                });



                gmap.addOverlay(marker);

            });
        </script>
    </head>
    <body>
        <div id="gmap">
        </div>
    </body>
</html>

or the old skool method where you can simply add onclick handler to to your link HTML:

var infoWindowMarkup = '<a id="infowindow-1" onclick=alert("Old Skool") class="clickeventvialive">click me</a>';

Thanks for the suggestion - I ended up going the intrusive javascript way and in-lining the onclick even in the markup. I loose 50 point SO rep and tons of dev cred but it was late on a Friday and I needed a fix. Later I'll look into the GEvent to redeem myself (if anything, just for myself).

Click Event Registered with jQuery Live in Google Map InfoWindow - Sta...

jquery google-maps live mouseclick-event infowindow
Rectangle 27 1

Why you are using 2 jquery scripts.

First of all use only one script from following

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

and your final scripts struture would be like this:

<link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <!--js scripts -->
    <script src="jsCode.js"></script> 
    <script src ="sirJson.js"></script>
    <!--gMap plugin API -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src = "gmap.js"></script>

Uncaught SyntaxError: Unexpected token : jquery-1.9.1.min.map:1 GET code.jquery.com/jquery.min.map 404 (Not Found) code.jquery.com/jquery.min.map:1 - error , how to include this file so it will work ? and what to disable so it will start using that

javascript - Gmap , jQuery and google maps - Stack Overflow

javascript jquery google-maps jquery-plugins jquery-gmap3