Develop Reference

How to show Google Map marker dynamically in a Laravel view page?

I found some JavaScript code on the internet. It's helping me to store the latitude and longitude of a place, from the Google Map by moving the marker on my database table.
Database column names are la|lo. Now I want to show the location on a view page. The map should have these properties frameborder="0", scrolling="no", marginheight="0", marginwidth="0", width="250", height="272".
I'm a novice and I have poor knowledge on JavaScript. I'm providing the js code of registering the latitude and longitude.
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize() {
var latitude = 23.786758526804636;
var longitude = 90.39979934692383;
var zoom = 11;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapProp = {
center: LatLng,
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById('la').value = event.latLng.lat();
document.getElementById('lo').value = event.latLng.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googleMap" style="width:auto;height:400px;"></div>
<input type="hidden" id="la" name="la">
<input type="hidden" id="lo" name="lo">

Since you indicated the lat/long are in the database, you can just retrieve it and set it on a array list in js. After that, you'll just need to iterate the list to add markers based on it.
The code here is from the official documentation provided.
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
For styling, you can check out the Styled Maps page in the official documentation. It should be sufficient enough with what you want to set in your post.

Markers do not show up on my Google Maps

I cannot get markers to show up on my google map, here is my code below, what do I need to fix? Thanks.
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(37.661932, -94.306856),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var myMarker = new google.maps.Marker({
position: LatLng(37.661932, -94.306856),
title: "About.com Headquarters"
});
var latlng2 = new google.maps.LatLng(37.661932, -94.306856);
var myMarker2 = new google.maps.Marker({
position: latlng2,
map: map,
title: "Apple Computer"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

There are two problems with your first marker "myMarker". You are not specifying a map, and you are not instantiating the "LatLng" object, as you should be doing. Changing the first marker like this should fix the issue:
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(37.661932, -94.306856),
map: map,
title: "About.com Headquarters"
});
The second marker looks fine. The first marker is probably throwing an error, which is causing the second marker not to show up as well.

Google Maps v3 infoWindow addDomListener for HTML Button

I have a simple google Maps example
JS File:
/*Standard Setup Google Map*/
var latlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 15,
center: latlng,
panControl: false,
mapTypeControl: true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// add Map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// add Marker
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-25.363882,131.044922)
});
// add Info Window
var infoWindow = new google.maps.InfoWindow();
Now i want to open the info Box when i click on a button in the my html template:
HTML File:
<body onload="initialize()">
...
<div id="map_canvas"></div>
...
<button id="test">Click</button>
...
</body>
adding these lines to my JS File:
var onMarkerHTMLClick = function() {
var marker = this;
var latLng = marker.getPosition();
var content = '<div style="text-align: center; font-size:14px;"><center><b>Company GmbH</b></center><div>Broadway Str.5</div><div>45132 Canvas</div></div>';
map.panTo(marker.getPosition());
map.setZoom(15);
infoWindow.setContent(content);
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
google.maps.event.addDomListener(document.getElementById("test"),'click', onMarkerHTMLClick);
error: marker.getPosition is not a function
why should this not work? If i do the same with a click function on the marker itself the window opens with no problems..

You need to trigger the event that opens the infoWindow. Probably the easiest thing to do is store your markers in a global array or if you dont have many just select them by ID.
Example
var myButton = document.getElementById('THE_ID');
google.maps.event.addDomListener(myButton, 'click', openInfoWindow);
openInfoWindow just being the callback function where you can trigger the event.

How to add a action for addDOMListener of Google Maps?

I just want to load the Google Maps based on the Mouseover event of different div element. For doing this I just used the following simple code. This code itself not working, can someone tell me what mistake I have made?
<script type="text/javascript">
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(40.740, -74.18),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var content = '<strong>A info window!</strong><br/>That is bound to a marker';
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: true
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener($("#showmap"), 'mouseover', function(){ alert("Hi");});
</script>
<div id='showmap'>
Show Map
</div>
<div id="map-canvas" style="width: 500px; height: 400px"></div>
Above simple alert function itself not called for this simple code.

The selector returns the jQuery object and the needed element can be accessed directly from the element array with a [0] . Also, make it "addDomListenerOnce", only need to initialize once.
$("#showmap")[0]
see a demo
google.maps.event.addDomListenerOnce($("#showmap")[0], 'mouseover',
function(){ initialize(); });

I just tried using this and this also worked.
Java Script Code:
function initialize(lat,longit,content) {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, longit),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: false
});
infowindow.open(map, marker);
}
Html Code:
<div id='showmap' onclick="initialize(1.37422,103.945,'<h2>Tampines</h2>')">
Show Map
</div>
I just tried using an idea from java, can we try a method call from the onclick and check whether it is working and to my surprise it worked.

Get directions in new window Google maps API v3

I embedded a google map in my contact page with the google maps js api.
All I want to do now, is when people click my marker they go to maps.google.com to get directions and find more info.
google.maps.event.addListener(marker, 'click', function () {
window.open('http://goo.gl/muSZ5','_blank');
});
that is my, code, the url is a short url to maps.google.com with added parameters.
The script works, but the browers does not automatically go to the tab that it opens (because it is called by a javascript trigger)
does anyone know how I can solve this.
So, click the marker, new window(tab) opens, automatically go to that window(tab)
This is my full code:
(function ($) {
Drupal.behaviors.location_block = {
attach: function (context, settings) {
console.log('test');
var myOptions = {
center: new google.maps.LatLng(50.87760,4.41923),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(50.87760,4.41923),
map: map,
title: "Ilias",
html: ""
});
google.maps.event.addListener(marker, 'click', function () {
window.open('http://goo.gl/maps/L3rK','_blank');
});
}
};
})(jQuery);
#EDIT #IMPORTANT
I found out the problem is only in google chrome, and only with my website ...

Its working fine in my machine.Please check the following code:
HTML CODE:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>​
JS CODE:
function initialize() {
var myLatLng = new google.maps.LatLng( 50, 50 ),
myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
marker = new google.maps.Marker( {position: myLatLng, map: map} );
google.maps.event.addListener(marker, 'click', function () {
window.open('http://goo.gl/muSZ5','_blank');
});
marker.setMap( map );
}
initialize();
​
CSS CODE:
#map-canvas
{
height: 400px;
width: 500px;
}​
See Online Demo