Rectangle 27 1

If you are asking whether angular will render a velocity template the answer is no....since a velocity template engine is required to render the velocity template....However is your case if you just want convert your velocity template to angular template then you would have to return json data directly to the controller....instead of putting it in the model map since you would not be able to access request scope in a javascript file....so directly return json in the response body and pass the required json object to angular js template.

I'm a bit confused, let me just understand this. Currently, the order of request proccess is this: hit url -> invoke method in controller -> render velocity template. In angular, when you hit url - it first renders the html and only than approaches the controller?

In angular when you navigate using a router.....it loads the template first and then invokes the controller performing digest operations to bind data into the template....that is why if you debug the loading you will see {} these tags..indicating that all the data has not been bound...if you are not using ui-router then you can create a directive binding a controller to that and placing it in the ui....once the directive is called from the ui the controller will immediately be called and it will load all the data the directive needs to execute.

angularjs - Using JSP (or Velocity templates) aside to Angular JS - St...

angularjs jsp spring-mvc velocity
Rectangle 27 3

I wrote a simple directive to load the google map API asynchronously :

// js/directives/gmapAsync.js

(function(){
'use strict';

angular.module('app').directive('gmapAsync',
    ['$window', '$rootScope', gmapAsync]
);

function gmapAsync($window, $rootScope){

    var gmapScript = $window.document.createElement('script');  

    $window.onGmapScriptLoaded = function(){
        console.log('google maps script loaded');

        $rootScope.gmapApiLoaded = true;
        $rootScope.$broadcast('gmap.api.loaded');

    };

    return {
        restrict: 'A',
        transclude: false,
        scope:false,
        link:   function(scope, element, attributes){

            if (navigator.onLine) {
                appendScript();
            } else {
                $window.addEventListener('online',appendScript);
            }

            function appendScript(){
                gmapScript.type = 'text/javascript';
                gmapScript.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=onGmapScriptLoaded';
                $window.document.body.appendChild(gmapScript);
            }
        }
    };
}
})();

Then in your main controller, you can handle the event :

// js/controllers/AppCtrl.js

(function(){
'use strict';

    angular.module('app').controller('AppCtrl',[$scope,AppCtrl])

    function AppCtrl($scope){

        $scope.$on('gmap.api.loaded',function(){
            // your stuff to init after the api is loaded
        });
    }

})();

You just have to declare the directive in your body tag :

<!DOCTYPE html>
<html>

    <head></head>

    <body data-ng-app="app" data-gmap-async data-ng-controller="AppCtrl">

        <!-- template body -->

        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/controllers/AppCtrl.js"></script>
        <script type="text/javascript" src="js/directives/gmapAsync.js"></script>
    </body>

</html>

javascript - Angular Js and google api client.js (gapi) - Stack Overfl...

javascript angularjs google-app-engine google-cloud-endpoints gapi
Rectangle 27 2

angular.module('fiveMinCatchupApp').controller('MainCtrl', function ($scope, uiGmapGoogleMapApi) {

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

  navigator.geolocation.getCurrentPosition(function(pos) {
    $scope.map.center = {
     latitude: pos.coords.latitude,
     longitude: pos.coords.longitude
    };
    $scope.$apply();
  });
});

javascript - Angular Js & google maps API ngGeolocation - Stack Overfl...

javascript angularjs google-maps google-maps-api-3 geolocation
Rectangle 27 6

Instead of trying to run the initialize function on load event you can try using ng-init

Add the initialize function to the scope:

$scope.initialize = function(){
    //code goes here
};

Then call initialize function when the controller is initialized by angular

<div data-ng-controller="BarsController" data-ng-init="initialize()"></div>

javascript - Issue loading google map with angular js - Stack Overflow

javascript jquery angularjs google-maps google-maps-api-3
Rectangle 27 2

event.target

If you want to access this.map in the event handler you should use arrow functions instead

google.maps.event.addListener(marker, 'click', ((marker, i) => { // <<<===
    return () => { // <<<===
      infowindow.setContent(infoContent);
      infowindow.open(this.map, marker);
    };
  })(marker, i)

otherwise this. won't point to the current class instance

Thanks for your reply. Unfortunately this don't solve my problem. I tried the js way with onclick instead of (click) but I only receive a Uncaught ReferenceError: myFunction is not defined.

. Angular2 doesn't process bindings added dynamically therefore this is not supposed to work. Only bindings added to component templates statically are processed by Angular2. You need to use

Thank you for pointing in the right direction. The angular2 way of addEventListener() seems to go throught ElementRef and Renderer. I try it out.

You can do it with ElementRef and Renderer but that is not the problem. The problem is to get a reference (direct DOM element reference or ElementRef) of the button. You can inject private elRef:ElementRef and use this.elRef.nativeElement.querySelector('infowindow button') or similar but if you access elRef.nativeElement you're out of the realm of platform neutrality again because nativeElement should not be accessed directly but with the limitation of the Renderer of only being able to call methods but never to get a result in return there is only so much you can do.

javascript - How could I call a Angular2 function from a Google Map in...

javascript google-maps-api-3 angular google-maps-markers
Rectangle 27 5

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: { lat: 40.731, lng: -73.997 }
    });
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;

    document.getElementById('submit').addEventListener('click', function () {
        geocodeLatLng(geocoder, map, infowindow);
    });
}

function geocodeLatLng(geocoder, map, infowindow) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) };
    geocoder.geocode({ 'location': latlng }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initMap);
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}
<script src="https://maps.google.com/maps/api/js"></script>
 <div id="floating-panel">
    <input id="latlng" type="text" value="40.714224,-73.961452">
    <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>

javascript - Get address from user location using Cordova/Angular JS -...

javascript angularjs cordova google-maps ionic-framework
Rectangle 27 1

I did some work around this and now I can force select 1st option from google placces using angular js and angular Autocomplete module. Thanks to kuhnza my code

<form method="get" ng-app="StarterApp"  ng-controller="AppCtrl" action="searchresults.html" id="target" autocomplete="off">
   <br/>
    <div class="row">
    <div class="col-md-4"><input class="form-control" tabindex="1" autofocus g-places-autocomplete force-selection="true"  ng-model="user.fromPlace" placeholder="From Place" autocomplete="off"   required>
    </div>
        <div class="col-md-4"><input class="form-control" tabindex="2"  g-places-autocomplete force-selection="true"  placeholder="To Place" autocomplete="off" ng-model="user.toPlace" required>
    </div>
    <div class="col-md-4"> <input class="btn btn-primary"  type="submit" value="submit"></div></div><br /><br/>
    <input class="form-control"  style="width:40%" type="text" name="sourceAddressLat" placeholder="From Place Lat" id="fromLat">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddressLang" placeholder="From Place Long" id="fromLong">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddress" placeholder="From Place City" id="fromCity">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLat" placeholder="To Place Lat" id="toLat">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLang" placeholder="To Place Long"id="toLong">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddress"placeholder="To Place City" id="toCity">
</form>

javascript - Google maps Places API V3 autocomplete - select first opt...

javascript google-maps autocomplete google-maps-api-3
Rectangle 27 1

I did some work around this and now I can force select 1st option from google placces using angular js and angular Autocomplete module. Thanks to kuhnza my code

<form method="get" ng-app="StarterApp"  ng-controller="AppCtrl" action="searchresults.html" id="target" autocomplete="off">
   <br/>
    <div class="row">
    <div class="col-md-4"><input class="form-control" tabindex="1" autofocus g-places-autocomplete force-selection="true"  ng-model="user.fromPlace" placeholder="From Place" autocomplete="off"   required>
    </div>
        <div class="col-md-4"><input class="form-control" tabindex="2"  g-places-autocomplete force-selection="true"  placeholder="To Place" autocomplete="off" ng-model="user.toPlace" required>
    </div>
    <div class="col-md-4"> <input class="btn btn-primary"  type="submit" value="submit"></div></div><br /><br/>
    <input class="form-control"  style="width:40%" type="text" name="sourceAddressLat" placeholder="From Place Lat" id="fromLat">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddressLang" placeholder="From Place Long" id="fromLong">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddress" placeholder="From Place City" id="fromCity">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLat" placeholder="To Place Lat" id="toLat">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLang" placeholder="To Place Long"id="toLong">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddress"placeholder="To Place City" id="toCity">
</form>

javascript - Google maps Places API V3 autocomplete - select first opt...

javascript google-maps autocomplete google-maps-api-3
Rectangle 27 1

I did some work around this and now I can force select 1st option from google placces using angular js and angular Autocomplete module. Thanks to kuhnza my code

<form method="get" ng-app="StarterApp"  ng-controller="AppCtrl" action="searchresults.html" id="target" autocomplete="off">
   <br/>
    <div class="row">
    <div class="col-md-4"><input class="form-control" tabindex="1" autofocus g-places-autocomplete force-selection="true"  ng-model="user.fromPlace" placeholder="From Place" autocomplete="off"   required>
    </div>
        <div class="col-md-4"><input class="form-control" tabindex="2"  g-places-autocomplete force-selection="true"  placeholder="To Place" autocomplete="off" ng-model="user.toPlace" required>
    </div>
    <div class="col-md-4"> <input class="btn btn-primary"  type="submit" value="submit"></div></div><br /><br/>
    <input class="form-control"  style="width:40%" type="text" name="sourceAddressLat" placeholder="From Place Lat" id="fromLat">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddressLang" placeholder="From Place Long" id="fromLong">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddress" placeholder="From Place City" id="fromCity">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLat" placeholder="To Place Lat" id="toLat">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLang" placeholder="To Place Long"id="toLong">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddress"placeholder="To Place City" id="toCity">
</form>

javascript - Google maps Places API V3 autocomplete - select first opt...

javascript google-maps autocomplete google-maps-api-3
Rectangle 27 2

Finally I figured out the solution after a bit research and help. I used the simple function to change the shape

$scope.chooseShape = function(shape) {
   $scope.shapeShow = shape;
return

And using ng-if I am showing the

<ui-gmap-circle ng-repeat="c in circles track by c.id" center="c.center" ng-if="shapeShow=='CIRCLE'"></ui-gmap-circle>              
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" ng-if="shapeShow == 'POLYGON'"></ui-gmap-drawing-manager>

and finally using ng-repeat on these circle and polygon to display as number of shapes a user can add.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Dynamically adding CIRCLE or POLYGON to google map using ...

javascript angularjs
Rectangle 27 18

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("click", click);

    g.selectAll("text")
    .data(json.features)
    .enter()
    .append("svg:text")
    .text(function(d){
        return d.properties.name;
    })
    .attr("x", function(d){
        return path.centroid(d)[0];
    })
    .attr("y", function(d){
        return  path.centroid(d)[1];
    })
    .attr("text-anchor","middle")
    .attr('font-size','6pt');


  });
}

How would I just return the state code and store it into a variable? I don't necessarily need any names to display, just need to get to the state code so I can use it for other things.

javascript - Add names of the states to a map in d3.js - Stack Overflo...

javascript jquery svg d3.js
Rectangle 27 932

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

I had to reverse the latitude and longitude in this example for my live coordinates to work. I tried making a map for brooklyn NY and my coordinates put the markers and center of map in Antartica. just thought I'd add that.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 931

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 931

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 931

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 921

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 921

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 921

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 920

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

I had to reverse the latitude and longitude in this example for my live coordinates to work. I tried making a map for brooklyn NY and my coordinates put the markers and center of map in Antartica. just thought I'd add that.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 920

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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));
    }
  </script>
</body>
</html>

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Hi Daniel, Thanks for the trick for multiple markers' event, the same code I used in my application. Everything works fine on "Android", "iPhone" but it doesn't seem to work on "Blackberry 6.0". I think it is not able to register Event for marker objects. Could you please give some suggestions what else can be done in such case? Thanks.

+1. By the way, the (marker, i) after the end of the nameless function means you are already calling it passing marker and i as arguments? But since it's a nameless, shouldn't already run without that? Or not? I'm a bit confused.

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908

I don't understand the utility of the fourth parameter of each locations. However, I would like to share with you a revisitation of this code with a complete explanation on how to use it: coderpills.wordpress.com/2014/06/15/

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3