How can center this marker in google maps to map div?

HTML & CSS
1

how can center this marker in google maps to map div??

<iframe id="map_canvas" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1050+Jackson+Ave,+Long+Island+City,+NY+11101,+United+States&amp;aq=0&amp;oq=1050+Jackson+Ave,+Long+Island+City,+NY,+11101&amp;sll=35.216482,33.463577&amp;sspn=0.014182,0.029762&amp;ie=UTF8&amp;hq=&amp;hnear=10-50+Jackson+Ave,+Long+Island+City,+New+York+11101&amp;t=m&amp;z=16&amp;iwloc=A&amp;ll=40.742244,-73.952784&amp;output=embed"></iframe>
2 
#map_canvas{display:table;margin:0 auto;}
3

to center marker on Map not div…
well?

4

I don’t know what version of maps you’re using, but does it’s API have anything like this?

var mapOptions = {
		zoom: 2,
		center: new google.maps.LatLng(0, 150.644)
		};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
5

i do not use code - just iframe with google maps url - review initial post above.

6

I’ve noticed that if I use the code for google’s iframe - embed it in my website, etc - but then change the width and height of the iframe manually, it un-centers the marker. There may be other ways to fix it, but I’ve always just gone back to the map site and re-created the code from there (with the new width and the height of the iframe that I want.) In the past, that has fixed the problem for me.

7

You have a lot more options if you draw on the Maps api, and it’s not hard to use. Here’s a demo:

Link to online demo

You can also add a pretty image as your marker, rather than the default one, which is a nice additional feature.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.map {width: 80%; margin: 0 auto; padding-bottom: 60%; position: relative;}

</style>
</head>
<body>

<div class="map" id="map"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>
	window.onload = function () {

	var latlng = new google.maps.LatLng(40.742244,-73.952784);

	var styles = [
		{
			stylers: [
				{ saturation: -70 }
			]
		},
		{
			featureType: "building",
			elementType: "labels"
		},
		{
			featureType: "poi", //points of interest
			stylers: [
				{ hue: '#0044ff' }
			]
		}
	];

	var myOptions = {
		zoom: 15,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDefaultUI: true,
		mapTypeControl: false,
		styles: styles,
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL
		}
	};

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

	// var image = 'enter path to image here';
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		title:"My Site",
	// icon: image // enable if using image for marker
	});

	google.maps.event.addDomListener(window, "resize", function() {
    	var center = map.getCenter();
		google.maps.event.trigger(map, "resize");
		map.setCenter(center);
	});

}
</script>
</body>
</html>
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.