Develop Reference

how to show multiple markers on map using laravel foreach loop?

i have list of lat long stored in db $order->customers->location_url and (location_url = 31.5952599,74.3526989 have data in this form) using foreach loop i am trying to print all markers on map in model but when i click to button it shows blank screen check screen shot even doesnot start map
here is my code that i am using to show map
html
<button class="btn-sm" type="button" data-toggle="modal" onclick ='initialize();' data-target="#map-modal-points">Show All Points</button>
model
<div class="modal fade" id="map-modal-points" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">All Shops</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="map_canvas" style="height: 400px"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary">Close</button>
</div>
</div>
</div>
</div>
java script
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
function initialize() {
var locations = [
#foreach ($orders as $order)
[ {{ $order->customers->location_url }} ]
#endforeach
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
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]),
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>
i am using this code to print map Laravel and google maps : foreach latitude/longitude show marker or map
is there any other way i can print all markers ? or what mistake i am making in it?

Flask and GoogleMaps Api Javascript

I am trying to manage Google Maps Api in order to work within Flask.
However it doesn't give any error, but it doesn't render the map itself.
It work perfectly on simple .html however Flask is having problem rendering map.js file itself
map.js
// Initiation of marker for Google Maps Api
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: {
lat: 52.857500,
lng: -8.987437
}
});
var labels = "ABCDEFGHIJKLMONPQRSTUVWXYZ";
var locations = [{
lat: 52.857500,
lng: -8.987437
}];
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
Flask Code
{% extends 'base.html' %}
{% block content %}
<!-- content -->
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<div class="row center"></div>
<h2 class="header center black-text">How to approach our office ? </h2>
<div class="row center">
<h5 class="header col s12 light">85 Aughanteeroe<br> Gort Road <br> Ennis <br> Co. Clare<br>V95 CXV2<br>Ireland</h5>
</div>
<div class="row center" id="map">
<br>
</div>
</div>
</div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCef1gneSCdkePrWnkXROPQUynW490rnd4&callback=initMap"></script>
<script src="{{url_for('static', filename='js/map.js')}}"></script>

Vue.js breaking Google Map functionality

Currently the code uses Vue.js to manage the inputs and post requests and is using JavaScript to handle things like Google Map functionality.
The issue is that when we wrap a div id around all the current HTML on a page so the Vue.js functionality works, it results in the Google Map code in a JavaScript file to run incorrectly and loads the page with no map. As soon as the Vue.js id (adminVenueVue) is removed the map works fine.
When trying to debug the issue it seems that the function that is responsible for updating the map doesn't run all the way through and stops when a listener function is created as no following code would run after. Below shows this function if you need more code please tell me.
function initCreateUpdateVenue() {
var mapCenter = new google.maps.LatLng({
lat: 54.445886,
lng: -3.435974
});
var marker, london = {
lat: 52.41,
lng: -1.69
};
var ZoomLevel = 5;
map = new google.maps.Map(document.getElementsByName('googleMap')[0], {
zoom: ZoomLevel,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.setZoom(5);
var input = (document.getElementsByName("autocomplete")[0]);
var options = {
componentRestrictions: {
country: "uk"
}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var element = document.getElementsByName("autocomplete")[0];
//remove any errors
element.classList.remove("is-invalid");
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
populate_hidden_fields(place);
set_venue_detail_fields(place);
populate_fields(place.address_components);
set_map_location();
});
}
Here is the HTML code (the Google Map code is at the bottom)
<div id="adminVenueVue">
<div class="row">
<div class="col-lg-12 ">
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Administrator Controls</div>
<div class="panel-body">
#include('venue.components.admin_controls', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Start by finding your address</div>
<div class="panel-body">
#include('venue.components.autocomplete-form', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Venue Details</div>
<div class="panel-body" style="padding-bottom: 16px;">
#include('venue.components.venue-details', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
<div class="col-lg-6 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable ">Address Details</div>
<div class="panel-body">
#include('venue.components.form', ['submitButtonText' => 'Submit Venue'])
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Map</div>
<div class="panel-body">
<div id="googleMap" name="googleMap" class="width-full" style="height: 500px;"></div>
</div>
</div>
</div>
</div>
</div>

I recommend using the Vue google map component (vue2-google-maps).
Follow this example code:
<body>
<div id="root">
<google-map :center="{lat: 1.38, lng: 103.8}" :zoom="12" style="width: 100%; height: 500px">
<ground-overlay source="./overlay.png" :bounds="{
north: 1.502,
south: 1.185,
east: 104.0262,
west: 103.5998,
}" :opacity="0.5">
</ground-overlay>
</google-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
v: '3.26',
},
// Demonstrating how we can customize the name of the components
installComponents: false,
});
document.addEventListener('DOMContentLoaded', function() {
Vue.component('google-map', VueGoogleMaps.Map);
Vue.component('ground-overlay', VueGoogleMaps.MapElementFactory({
mappedProps: {
'opacity': {}
},
props: {
'source': {type: String},
'bounds': {type: Object},
},
events: ['click', 'dblclick'],
name: 'groundOverlay',
ctr: () => google.maps.GroundOverlay,
ctrArgs: (options, {source, bounds}) => [source, bounds, options],
}));
new Vue({
el: '#root',
data: {
place: '',
},
});
});
</script>
</body>
Or, if you're using webpack and Vue file components, follow the instructions bellow.
First install it : npm install vue2-google-maps
Then register it in main.js file
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_TOKEN',
libraries: 'places', // This is required if you use the Autocomplete plugin
}
})
So, you can use it like a component:
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
#click="center=m.position"
/>
</GmapMap>
More at:
https://www.npmjs.com/package/vue2-google-maps
https://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html
https://alligator.io/vuejs/vue-google-maps/ (tutorial)

Can't grab data from ng-repeat

when i use ng-repeat to show data json from php it work but when the data i use for button it can't grap some data. my data grap latitude and longitude from http my controller.js
.controller('HomeCtrl', function ($scope, kaka, $ionicPopup, $http){
$scope.item ={};
$scope.code = {};
$scope.sizes = [ {code: 123456789, name: 'Modul 1'}, {code: 864369038796946, name: 'Modul 4'},
{code: 864369038803833, name: 'Modul 5'}, {code: 864369038816645, name: 'Modul 6'},
{code: 864369038797142, name: 'Modul 7'}, {code: 864369038796698, name: 'Modul 8'}];
$scope.update = function(selected) {
$scope.item = selected;
};
$scope.rlockbtn = function () {
kaka.rlock($scope.item.code).success(function (data) {
var alertPopup = $ionicPopup.alert({
title: $scope.item.code,
template: 'Lock'
});
}).error(function (data) {
});
};
$http.get("http://192.168.100.13:88/OMG1/web.php?tN=find")
.then(function(response) {
$scope.myWelcome = response.data;
});
$scope.find = function () {
var mylatlng = {lat: $scope.myWelcome.latitude, lng: $scope.myWelcome.longitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: -7.3342266, lng: 112.7650341},
//center: {lat: data[0].lat, lng: data[0].lng},
mapTypeId: 'terrain'
});
var marker = new google.maps.Marker({
position: mylatlng,
map: map,
title: 'Your Motor'
});
};
)}
this is my html code
<script src="angular.min.js"></script>
<ion-view view-title="Home">
<ion-content style="background-color:#818181; background-size: cover;">
<ion-item class="row item-text-wrap " >
<div class="col" style="height: 300px;padding: 0px" id="map" data-tap-disabled="true"></div>
</ion-item><br>
<form name="form">
<div class="button-bar">
<div>
<select ng-options="size as size.code for size in sizes " ng-model="item" style="background-color:#4d94ff;color: white"ng-change="update(item)"></select>
</div>
</div>
<div>
<ul>
{{myWelcome}}
<li ng-repeat="x in myWelcome" >
{{ x.latitude}}
{{ x.longitude}}
</li>
</ul>
<button class="btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="rlockbtn()" >Lock</button>
<button class="btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="unlock()" >Unlock</button>
<button class="btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="engine()" >Engine Off</button>
</div>
</form>
<div class="button-bar">
<button class="icon ion-ios-location btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="find()" > Find</button>
<button class="icon ion-map btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="tracking()" > Tracking</button>
</div>
</ion-content>
</ion-view>
please help me solve my problem

I am not sure but it looks like your myWelcome.latitude and longitude are arrays, so it should be:
<ul>
{{myWelcome}}
<li ng-repeat="x in myWelcome.latitude" >
{{ x}}
</li>
<li ng-repeat="x in myWelcome.longitude" >
{{ x}}
</li>
</ul>

Google Map Starts Path at Top Left Center on Bootstrap Modal

I am working on google map. Onclick image, google map display on bootstrap modal, to display route path using latlng. All functionality is working properly but
The map start position marker, I want to center the marker position when the map is load, just now it's as per image. The start point it's in the top left corner. I have checked so many example, but all are not working in my code.
Also i tried using resize, trigger function.
google.maps.event.trigger(map, 'resize');
map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
HTML
Click
Modal and Script
<div id="mapModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridModalLabel">Map Display</h4>
</div>
<div class="modal-body">
<div class="container-fluid bd-example-row">
<div class="row">
<div id="map_polyline" style="width: 100%; height: 655px;"></div>
<script type="text/javascript">
function initialize() {
var mapProp = new google.maps.Map(document.getElementById('map_polyline'), {
zoom: 15,
maxZoom: 30,
minZoom: 1,
streetViewControl: false,
center: new google.maps.LatLng(23.01780,72.53076),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myTrip=new Array();
myTrip.push(new google.maps.LatLng(23.01780,72.53076));
myTrip.push(new google.maps.LatLng(23.01846,72.52987));
myTrip.push(new google.maps.LatLng(23.01909,72.53054));
myTrip.push(new google.maps.LatLng(23.01954,72.52991));
myTrip.push(new google.maps.LatLng(23.02060,72.53064));
myTrip.push(new google.maps.LatLng(23.02125,72.53006));
myTrip.push(new google.maps.LatLng(23.02237,72.53076));
myTrip.push(new google.maps.LatLng(23.02306,72.52988));
myTrip.push(new google.maps.LatLng(23.02438,72.53021));
myTrip.push(new google.maps.LatLng(23.02467,72.52899));
myTrip.push(new google.maps.LatLng(23.02486,72.52769));
myTrip.push(new google.maps.LatLng(23.02555,72.52695));
myTrip.push(new google.maps.LatLng(23.02616,72.52656));
myTrip.push(new google.maps.LatLng(23.02704,72.52641));
myTrip.push(new google.maps.LatLng(23.02868,72.52664));
myTrip.push(new google.maps.LatLng(23.03068,72.52700));
myTrip.push(new google.maps.LatLng(23.03173,72.52555));
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(mapProp);
google.maps.event.trigger(mapProp, 'resize');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

try this
$('#myMapModal').on('show.bs.modal', function() {
resizeMap();
})
function resizeMap() {
if(typeof map =="undefined") return;
setTimeout( function(){resizingMap();} , 400);
}
function resizingMap() {
if(typeof map =="undefined") return;
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}