Add Marker to Google Map

The following code will display a google map inside the div with a marker plotted at the at the defined latitude & longitude.

Javascript :

var map;
var lat = 30.450;
var lon = 50.850;
function initialize() {
    var myLatlng = new google.maps.LatLng(lat, lon);
    var mapOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Title Goes Here'
$(function () {


<div id="map-canvas"></div>

2 Comments on "Add Marker to Google Map"

  1. Hi Roy,
    I have came to know about you from stckoverflow. I am really inspired by you. I have just change my field of work from prepress to webdevelopment. I will be grateful and obliged, if you could guid me to learn MVC and opencart, Codeignitor coding.

    Thanks & Regards


    1. Hey man,

      Thankyou for your kind words.. Basically you you learn basics of PHP/MySQL first and then proceed to learning OOP concepts. Once you have your basics right, it doesnt matter which framework you take, you can always crack it well.. Always think that, the one who created the frameworks is just a developer like us.. Opencart and Codeigniter have superb community support which actually helped me big time.. Cheers..Ill send you some tutorials/blogs which i found worth while learning Opencart as well as Codeigniter.


Leave a Reply

Your email address will not be published. Required fields are marked *