I am using the example from this webpage to display my maps:


(Example - Using Google Maps API v3 setting OSM as a base map layer)

However, I need to add markers but I get a blank page. See code below:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>OpenStreetMap with Google Maps v3 API</title>
    <style type="text/css">
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
    <div id="map"></div>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var element = document.getElementById("map");

        Build list of map types.
        You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
        but static lists sucks when google updates the default list of map types.
        var mapTypeIds = [];
        for(var type in google.maps.MapTypeId) {

        var map = new google.maps.Map(element, {
            center: new google.maps.LatLng(-37.372096000,143.919544000),
            zoom: 14,
            mapTypeId: "OSM",
            mapTypeControlOptions: {
                mapTypeIds: mapTypeIds

        var markers = new OpenLayers.Layer.Markers( "Markers" );

        markers.addMarker(new OpenLayers.Marker(lonLat));

        map.setCenter (lonLat, zoom);

        map.mapTypes.set("OSM", new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
            tileSize: new google.maps.Size(256, 256),
            name: "OpenStreetMap",
            maxZoom: 18

Please what am I doing wrong..

  • Just a general hint (so no real answer): If you use general Webmap frameworks, you are indipendend from service APIs and map providers and can mix/add everything that fits in your case: wiki.openstreetmap.org/wiki/Frameworks#Webmaps With Google Maps, you are tied to their API and Maps (AFAIK at least from a legal perspective) – Mapper Dec 20 '13 at 20:09

you are using OpenLayers markers. OpenLayers markers are used in OpenLayers Map api. Since you are using Google Maps Api, you need to use markers from google map api. so the markers sould be defined as

var markers = new google.maps.Marker() 
//see https://developers.google.com/maps/documentation/javascript/reference#Marker
| improve this answer | |

Take a look at this and let me know if that is what you are looking for?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.