logo
down
shadow

Multiple Markers in GoogleMaps Javascript+Laravel


Multiple Markers in GoogleMaps Javascript+Laravel

By : Bunda Icha M'botz
Date : November 22 2020, 02:42 PM
wish of those help What you doing wrong is; that you try to get item from objects through an index. When you would try console.log(locations[i]) within your for-loop you would see something like this:
code :
{
    dealership_name: "Shyam Motors",
    lat: "22.544303894",
    lng: "88.3647613525",
}
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
        map: map
    });

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


Share : facebook icon twitter icon
Multiple Markers on Googlemaps api

Multiple Markers on Googlemaps api


By : rbios dev
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Clustering! See this page: https://developers.google.com/maps/articles/toomanymarkers I use this solution in my actual project.
Example:
code :
 var latlng = new google.maps.LatLng(-17.308688,-49.495605);
 var myLatlng, marker, marker_cluster;
 var markers = [];

 var mapOptions = {
        zoom: 4,
        minZoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: '#f0f0f0'
 };
 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

$.each(itens, function (k, iten) {
        myLatlng = new google.maps.LatLng(iten.lat, iten.lng);
        marker = new google.maps.Marker({
            position: myLatlng,
            title: iten.title
        });

        markers.push(marker);
    });

marker_cluster = new MarkerClusterer(map, markers);
Multiple markers with infowindow are not showing on GoogleMaps

Multiple markers with infowindow are not showing on GoogleMaps


By : user2397666
Date : March 29 2020, 07:55 AM
I wish did fix the issue. The porblem ist that in your function pintaMarkerthe map1 object is null!!
The solution:
code :
 pintaMarker(41.385, 2.154, 'hola', map1);
    function pintaMarker(lat,lng,html, map1){
        var myLatLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map1,
        });

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.setOptions({
                content: html
            });
            infowindow.open(map1, marker);
            console.log(infowindow);
        });
        markers.push(marker);
    }
adding multiple markers on GoogleMaps

adding multiple markers on GoogleMaps


By : Gakooya_J
Date : March 29 2020, 07:55 AM
hope this fix your issue Create a list of latitude and longitude in your views and send it to template in context.
code :
import json

def testgmap(request):
    data = LocateGoose.objects.values('name', 'latitude', 'longitude')
    json_data = json.dumps(list(data))
    return render(request, 'hereismygoose.html', {"data": json_data}) 
var locations = {{data|safe}};
var marker, i;

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i]['latitude'], locations[i]['longitude']),
        map: map,
        title: locations[i]['name']
    });
}
Googlemaps with multiple markers and a list of the locations pointing to the markers

Googlemaps with multiple markers and a list of the locations pointing to the markers


By : Shenggui Xue
Date : March 29 2020, 07:55 AM
Hope that helps I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
code :
   var markers = locations.map(function(location, i) {
      var marker = new google.maps.Marker({
        position: location
      });
      return marker;
    });
javascript googlemaps with multiple markers not showing markers in android using cordova app

javascript googlemaps with multiple markers not showing markers in android using cordova app


By : Abdul Quadir
Date : March 29 2020, 07:55 AM
wish helps you Finally i became that the error is from webview browser of cordova that do not render the markers , maybe because it do not support very well canvas as do other browsers like chrome of firefox. So the solution is make and overlay here is my code example that now works on Cordova android platform.
this is the html
code :
 <head>

        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Google Maps Multiple Markers</title>

    </head>
    <body>
        <div class="app">
            <button onclick="dale()">click</button>
            <button onclick="dale2()">click2</button>
            <div id="map" style="height: 400px; width: 500px;">
            </div>

            <script type="text/javascript">

            </script>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="https://maps.google.com/maps/api/js?key=AIzaSyBosuhuoHgQDdhUBYc_YgspOHPDFkvhuD8&libraries=drawing,place,geometry,visualization&callback=initMap" type="text/javascript"></script>

    </body>
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;
var CustomMarker;
function initMap() {
    initCustomMarker();
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

function addMarkers() {
    var infowindow = new google.maps.InfoWindow();

    var overlay, i;

    for (i = 0; i < locations.length; i++) {
        overlay = new CustomMarker(
            new google.maps.LatLng(locations[i][1],locations[i][2]),
            map,
            {
                marker_id: '123',
                color: 'Red',
                titulo : locations[i][0],
                infowindow : infowindow
            }
        );


    }
}

function dale(){
    debugger;
    console.log(map);
    console.log(google.maps);
    addMarkers();
}

function dale2(){
    console.log(map);
    console.log(google.maps);
    var overlay = new CustomMarker(
        new google.maps.LatLng(-33.890542, 151.274856),
        map,
        {
            marker_id: '123',
            color: 'Red',
            titulo : 'Podcast',
            infowindow:  new google.maps.InfoWindow()
        }
    );

}


var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {

        console.log('Received Event: ' + id);
        initMap();
    }
};


function initCustomMarker(){
    CustomMarker = function (latlng, map, args) {
        this.latlng = latlng;
        this.args = args;
        this.setMap(map);
    }

    CustomMarker.prototype = new google.maps.OverlayView();

    CustomMarker.prototype.draw = function() {

        var self = this;

        var div = this.div;

        if (!div) {

            div = this.div = document.createElement('div');

            div.className = 'marker';

            div.style.position = 'absolute';
            div.style.cursor = 'pointer';
            div.style.width = '20px';
            div.style.height = '20px';
            if(this.args.color != null)
                div.style.background = this.args.color;
            else
            div.style.background = 'blue';

            if (typeof(self.args.marker_id) !== 'undefined') {
                div.dataset.marker_id = self.args.marker_id;
            }
            var infowindow = this.args.infowindow;
            var content = this.makeContent();
            var map = this.map;
            var latlng = this.latlng;
            google.maps.event.addDomListener(div, "click", function(event) {
                google.maps.event.trigger(self, "click");
                infowindow.setPosition(latlng);
                infowindow.setContent(content);
                infowindow.open(map);
            });

            var panes = this.getPanes();
            panes.overlayImage.appendChild(div);
        }

        var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

        if (point) {
            div.style.left = point.x + 'px';
            div.style.top = point.y + 'px';
        }
    };

    CustomMarker.prototype.remove = function() {
        if (this.div) {
            this.div.parentNode.removeChild(this.div);
            this.div = null;
        }
    };

    CustomMarker.prototype.getPosition = function() {
        return this.latlng;
    };
    CustomMarker.prototype.makeContent = function() {
        var res = "<div>";
        if(this.args.titulo != null)
        res += "<h6>"+this.args.titulo+"</h6>";
        res += "<p> "+this.latlng.lat()+", "+this.latlng.lng()+"</p>";
        res += "</div>";
        return res;
    };


}



app.initialize();
Related Posts Related Posts :
  • Can I disable sorting in dgrid for performance gain?
  • Which tools (that are not plugins) can be used to create animation which can be manipulated at runtime?
  • Boostrap carousel not working
  • Ember controllers in nested routes
  • How to reload ng-include in AngularJS?
  • Add enter on event in javascript
  • How to set different background color for each repeated column of RadioButtonList
  • Angular filter data by date
  • Showing multiple info boxes in Google Maps when pulling from MySQL
  • Cordova event DeviceReady don't work on all pages
  • JavaScript document object lastModified using toLocale string
  • TypeError: $(...).autocomplete is not a function $("#partipnt-name").autocomplete({
  • Javascript isnan issue
  • Change variance on mouse movement
  • Highcharts - set xAxis range when using xAxis Categories?
  • Typeahead 0.11.1 Mouse over and keyboard conflict when viewing dropdown search results
  • How to use data from $http.get after page load in Vue.js?
  • How to test angular promise with Jasmine
  • Conditionally chain functions in JavaScript
  • Using QueryBuilder and getting "QueryBuilder is not defined" error
  • slideToggle with bounce effect not working
  • AngularJS binding two variables together without being told to do so
  • Anchor doesn't work
  • set different values for drop down list if check box checked or unchecked
  • Fullscreen slide-toggle with cookie
  • Set variable if input field contains text
  • signin with Linkedin code give me html validation error
  • how to call a jquery function from a form
  • iron router reload specific header element
  • .submit function not running when invalid with kendo validator
  • How to use bind() in JS object init
  • AngularJS Application Declaration?
  • Callback function not invoked in js
  • Connect to Oracle DB from JavaScript
  • Google Maps API: Want geolocation to click automatically on data layer below
  • getJSON alert not returning anything - data issue?
  • rxjs observables lifecycle : detecting a completed observable
  • Merging search terms from 2 separate input fields
  • Angular $scope function not working outside of ng-repeat
  • Array field referenced to another class Array filed doesn't refresh
  • How to get current row cell value
  • jQuery - Loop Through TD widths and then Loop through TH and apply TD widths
  • Create segmented control-like with animation
  • Where to put "a lot" of data, array / file / somewhere else, in JS on node.js
  • can I filter a countBy in lodash?
  • JavaScript - Performing a recursive search, value not being retained
  • How to auto hide multiple alerts one by one. first in - first out?
  • EJS failing to render template
  • Asynchronous code in custom ESLint rules
  • Dart with RIkuloUI. Why is there no output?
  • ng-idle cannot read a property
  • Directive scope not updated on async
  • How do I get the value of an item in a drop down menu list using javascript?
  • Extended execution does not seem to work in Windows 10 Universal JavaScript apps
  • Directory structure for parallel development: Dart and Javascript
  • How to dynamically select the option for dynamically added select/option tag
  • Callbacks in JavaScript
  • gulp-minify without rename original files
  • create a link to run javascript in another window
  • Javascript, Uncaught TypeError: Cannot read property "cells" of undefined
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co